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

:root {
    --mc-bg: #c6c6c6;
    --mc-dark: #555555;
    --mc-light: #ffffff;
    --mc-slot-bg: #8b8b8b;
    --mc-slot-light: #ffffff;
    --mc-slot-dark: #373737;
    --correct: #5daa29;
    --present: #c9a000;
    --absent: #3a3a3a;
}

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body {
    font-family: 'VT323', monospace;
    background-color: #866043;
    background-image: url('https://raw.githubusercontent.com/misode/mcmeta/assets/assets/minecraft/textures/block/dirt.png');
    background-size: 64px 64px;
    background-repeat: repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    min-height: 100vh;
    color: #3f3f3f;
}

.container {
    max-width: 480px;
    margin: 0 auto;
    padding: 10px;
}

/* Minecraft Panel */
.mc-panel {
    background: var(--mc-bg);
    border: 2px solid;
    border-color: var(--mc-light) var(--mc-dark) var(--mc-dark) var(--mc-light);
    margin-bottom: 8px;
}

.mc-panel-inner {
    background: var(--mc-bg);
    border: 2px solid;
    border-color: var(--mc-slot-dark) var(--mc-light) var(--mc-light) var(--mc-slot-dark);
    margin: 2px;
    padding: 8px;
}

/* Header Panel */
.header-inner {
    text-align: left;
    position: relative;
    padding: 8px;
    padding-left: 12px;
}

h1 {
    font-size: 32px;
    color: #3f3f3f;
    letter-spacing: 4px;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}

.subtitle {
    font-size: 16px;
    color: #555;
    margin-top: 2px;
}

.header-buttons {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
}

.icon-btn {
    width: 32px;
    height: 32px;
    background: var(--mc-slot-bg);
    border: 2px solid;
    border-color: var(--mc-slot-light) var(--mc-slot-dark) var(--mc-slot-dark) var(--mc-slot-light);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    background: #7a7a7a;
}

/* Crafting Section */
.crafting-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px;
}

.crafting-grid {
    display: grid;
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(3, 44px);
    gap: 1px;
}

.grid-slot {
    width: 44px;
    height: 44px;
    background: var(--mc-slot-bg);
    border: 2px solid;
    border-color: var(--mc-slot-dark) var(--mc-slot-light) var(--mc-slot-light) var(--mc-slot-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.grid-slot:hover {
    background: #7a7a7a;
}

.grid-slot img {
    width: 36px;
    height: 36px;
    image-rendering: pixelated;
}

.craft-arrow {
    font-size: 28px;
    color: #555;
}

.output-slot {
    width: 52px;
    height: 52px;
    background: var(--mc-slot-bg);
    border: 2px solid;
    border-color: var(--mc-slot-dark) var(--mc-slot-light) var(--mc-slot-light) var(--mc-slot-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.question-mark {
    font-size: 28px;
    color: #555;
}

.output-slot img {
    width: 44px;
    height: 44px;
    image-rendering: pixelated;
}

.attempts-display {
    text-align: center;
    font-size: 16px;
    color: #555;
    margin: 8px 0;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.mc-btn {
    font-family: 'VT323', monospace;
    font-size: 18px;
    padding: 8px 16px;
    background: var(--mc-bg);
    border: 3px solid;
    border-color: var(--mc-light) var(--mc-dark) var(--mc-dark) var(--mc-light);
    cursor: pointer;
    color: #3f3f3f;
}

.mc-btn:hover {
    background: #d6d6d6;
}

.mc-btn:active {
    border-color: var(--mc-dark) var(--mc-light) var(--mc-light) var(--mc-dark);
}

.mc-btn-green {
    background: #5daa29;
    color: white;
    border-color: #7dca49 #3d8a09 #3d8a09 #7dca49;
}

.mc-btn-green:hover {
    background: #6dba39;
}

/* ==================== INVENTORY - EXACT MINECRAFT CREATIVE MENU STYLE ==================== */

.inventory-wrapper {
    margin-bottom: 8px;
    position: relative;
}

/* Tab rows - positioned to overlap panel border */
.inventory-tabs-top {
    display: flex;
    position: relative;
    z-index: 10;
    margin-left: 4px;
    margin-bottom: -4px; /* Overlap with panel border */
}

.inventory-tabs-bottom {
    display: flex;
    position: relative;
    z-index: 10;
    margin-left: 4px;
    margin-top: -8px; /* Overlap with panel border */
}

/* Individual tab - Minecraft slot size */
.inv-tab {
    width: 46px;
    height: 50px;
    background: var(--mc-bg);
    border: 3px solid;
    border-color: var(--mc-light) var(--mc-dark) var(--mc-dark) var(--mc-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

/* Top tab styling */
.inventory-tabs-top .inv-tab {
    border-bottom-color: var(--mc-dark);
}

.inventory-tabs-top .inv-tab.active {
    border-bottom-color: var(--mc-bg);
    padding-bottom: 7px;
    margin-bottom: -3px;
}

/* Bottom tab styling */
.inventory-tabs-bottom .inv-tab {
    border-top-color: var(--mc-dark);
}

.inventory-tabs-bottom .inv-tab.active {
    border-top-color: var(--mc-bg);
    padding-top: 7px;
    margin-top: -3px;
}

.inv-tab:hover {
    background: #d0d0d0;
}

.inv-tab.active:hover {
    background: var(--mc-bg);
}

/* Tab icon image */
.inv-tab img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

/* No inner slot needed - just the image */
.inv-tab-inner {
    display: contents;
}

/* Inventory Panel */
.inventory-panel {
    position: relative;
    z-index: 1;
}

.inventory-inner {
    padding: 6px;
    max-height: 250px;
    overflow-y: auto;
}

/* Search bar - inline with tabs */
.search-input-inline {
    flex: 1;
    min-width: 60px;
    padding: 4px 6px;
    font-family: 'VT323', monospace;
    font-size: 14px;
    background: #fff;
    border: 2px solid;
    border-color: var(--mc-slot-dark) var(--mc-slot-light) var(--mc-slot-light) var(--mc-slot-dark);
    color: #555;
    margin-left: 4px;
    height: 36px;
    box-sizing: border-box;
}

.search-input-inline::placeholder {
    color: #888;
    font-style: italic;
}

/* Hide old search container if still present */
.search-container {
    display: none;
}

/* Item grid - 9 columns like real Minecraft */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 2px;
}

/* Individual inventory slot - classic Minecraft bevel */
.inventory-item {
    aspect-ratio: 1;
    background: var(--mc-slot-bg);
    border: 2px solid;
    border-color: var(--mc-slot-dark) var(--mc-slot-light) var(--mc-slot-light) var(--mc-slot-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

.inventory-item:hover {
    background: #6a6a6a;
}

.inventory-item.selected {
    background: #5555bb;
    border-color: #7777dd #3333aa #3333aa #7777dd;
}

.inventory-item img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

/* ==================== PREVIOUS GUESSES ==================== */

.previous-guesses-section {
    padding: 8px;
}

.guesses-label {
    text-align: center;
    font-size: 16px;
    color: #555;
    margin-bottom: 8px;
}

.previous-guesses {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    min-height: 30px;
}

.guess-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 22px);
    grid-template-rows: repeat(3, 22px);
    gap: 1px;
}

.guess-mini-cell {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #444;
}

.guess-mini-cell.correct { background: var(--correct); }
.guess-mini-cell.present { background: var(--present); }
.guess-mini-cell.absent { background: var(--absent); }
.guess-mini-cell.empty { background: var(--mc-slot-bg); }
.guess-mini-cell.empty-wrong { background: var(--absent); }

.guess-mini-cell img {
    width: 18px;
    height: 18px;
    image-rendering: pixelated;
}

.guess-number {
    font-size: 12px;
    color: #555;
    text-align: center;
    margin-top: 2px;
}

/* ==================== MODALS ==================== */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-overlay.active {
    display: flex;
}

.result-modal {
    background: var(--mc-bg);
    border: 4px solid;
    border-color: var(--mc-light) var(--mc-dark) var(--mc-dark) var(--mc-light);
    padding: 20px;
    max-width: 360px;
    width: 90%;
    text-align: center;
}

.result-modal.win { border-color: #7dca49 #3d8a09 #3d8a09 #7dca49; }
.result-modal.lose { border-color: #ff6b6b #cc3333 #cc3333 #ff6b6b; }

.result-modal h2 {
    font-size: 28px;
    margin-bottom: 8px;
}

.result-answer {
    margin: 16px 0;
}

.result-answer img {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
}

.result-answer .item-name {
    display: block;
    font-size: 20px;
    margin-top: 8px;
}

.result-stats {
    font-size: 16px;
    color: #555;
}

.share-preview {
    background: #2d2d2d;
    color: white;
    padding: 12px;
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 4px;
}

.next-puzzle {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.help-modal {
    background: var(--mc-bg);
    border: 4px solid;
    border-color: var(--mc-light) var(--mc-dark) var(--mc-dark) var(--mc-light);
    padding: 20px;
    max-width: 360px;
    width: 90%;
}

.help-modal h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 16px;
}

.help-modal h3 {
    font-size: 18px;
    margin: 12px 0 8px;
}

.help-section {
    margin: 12px 0;
}

.help-section p {
    font-size: 14px;
    line-height: 1.4;
    margin: 4px 0;
}

.help-example {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    font-size: 14px;
}

.help-color-box {
    width: 20px;
    height: 20px;
    border: 1px solid #444;
}

.help-color-box.green { background: var(--correct); }
.help-color-box.yellow { background: var(--present); }
.help-color-box.gray { background: var(--absent); }

.dont-show-again {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin: 16px 0;
    cursor: pointer;
}

/* Auth Styles */
.auth-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.auth-tab {
    flex: 1;
    padding: 8px;
    font-family: 'VT323', monospace;
    font-size: 16px;
    background: var(--mc-slot-bg);
    border: 2px solid;
    border-color: var(--mc-slot-light) var(--mc-slot-dark) var(--mc-slot-dark) var(--mc-slot-light);
    cursor: pointer;
    color: #555;
}

.auth-tab.active {
    background: var(--mc-bg);
    border-color: var(--mc-light) var(--mc-dark) var(--mc-dark) var(--mc-light);
    color: #333;
}

.auth-input {
    width: 100%;
    padding: 8px 10px;
    margin: 6px 0;
    font-family: 'VT323', monospace;
    font-size: 16px;
    background: #fff;
    border: 2px solid;
    border-color: var(--mc-slot-dark) var(--mc-slot-light) var(--mc-slot-light) var(--mc-slot-dark);
    color: #333;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.stat-item {
    text-align: center;
    padding: 8px;
    background: var(--mc-slot-bg);
    border: 2px solid;
    border-color: var(--mc-slot-dark) var(--mc-slot-light) var(--mc-slot-light) var(--mc-slot-dark);
}

.stat-value {
    font-size: 24px;
    color: #333;
}

.stat-label {
    font-size: 12px;
    color: #666;
}

/* Leaderboard */
.leaderboard-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.leaderboard-tab {
    flex: 1;
    padding: 6px;
    font-family: 'VT323', monospace;
    font-size: 14px;
    background: var(--mc-slot-bg);
    border: 2px solid;
    border-color: var(--mc-slot-light) var(--mc-slot-dark) var(--mc-slot-dark) var(--mc-slot-light);
    cursor: pointer;
    color: #555;
}

.leaderboard-tab.active {
    background: var(--correct);
    color: white;
}

.leaderboard-list {
    max-height: 250px;
    overflow-y: auto;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

.leaderboard-rank {
    width: 24px;
    font-weight: bold;
    color: #555;
}

.leaderboard-name {
    flex: 1;
    color: #333;
}

.leaderboard-score {
    color: var(--correct);
    font-weight: bold;
}

.loading {
    text-align: center;
    padding: 20px;
    color: #666;
}

/* New Game button in crafting panel */
.new-game-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(180deg, #ffd700 0%, #ff8c00 100%);
    color: #333;
    font-family: 'VT323', monospace;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 12px;
    border: 2px solid;
    border-color: #ffe44d #cc7000 #cc7000 #ffe44d;
    cursor: pointer;
    white-space: nowrap;
    z-index: 10;
}

.new-game-btn:hover {
    background: linear-gradient(180deg, #ffe44d 0%, #ffa500 100%);
}

/* Google button */
.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
}

.google-btn:hover {
    background: #f5f5f5 !important;
}

/* Premium badge */
.premium-badge {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #333;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 4px;
    font-weight: bold;
}

/* User info positioned to right below icons */
.header-inner {
    position: relative;
}

.user-info-row {
    position: absolute;
    right: 8px;
    bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #3a3a3a;
}

#display-name {
    font-weight: 500;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unlimited-badge {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #333;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Responsive */
@media (max-width: 480px) {
    .container { padding: 4px; }
    h1 { font-size: 22px; letter-spacing: 2px; }
    .subtitle { font-size: 12px; }
    .header-panel .mc-panel-inner { padding: 4px 6px; }
    .header-buttons { gap: 2px; }
    .icon-btn { width: 24px; height: 24px; font-size: 12px; }
    
    /* Smaller crafting grid */
    .crafting-grid {
        grid-template-columns: repeat(3, 36px);
        grid-template-rows: repeat(3, 36px);
    }
    .grid-slot { width: 36px; height: 36px; }
    .grid-slot img { width: 28px; height: 28px; }
    .output-slot { width: 42px; height: 42px; }
    .craft-arrow { font-size: 20px; }
    .attempts-display { font-size: 14px; margin: 4px 0; }
    .action-buttons { gap: 4px; }
    .mc-btn { padding: 4px 10px; font-size: 14px; }
    
    /* Smaller tabs */
    .inv-tab { width: 32px; height: 36px; }
    .inv-tab img { width: 24px; height: 24px; }
    .inventory-tabs-top, .inventory-tabs-bottom { gap: 2px; }
    
    /* Inline search */
    .search-input-inline { 
        height: 32px; 
        font-size: 12px; 
        padding: 2px 4px;
        min-width: 50px;
    }
    
    /* Smaller inventory */
    .inventory-inner { 
        padding: 4px; 
        max-height: 160px; 
    }
    .inventory-item { padding: 1px; }
    .inventory-item img { width: 28px; height: 28px; }
    
    /* New game button */
    .new-game-btn { 
        padding: 4px 8px; 
        font-size: 12px; 
        top: 4px; 
        right: 4px; 
    }
    
    /* Previous guesses */
    .previous-guesses-section { padding: 4px; }
    .guesses-label { font-size: 14px; margin-bottom: 4px; }
    .guess-row { gap: 1px; }
    .guess-cell { width: 24px; height: 24px; }
    .guess-cell img { width: 18px; height: 18px; }
}

/* Disclaimer */
.disclaimer {
    text-align: center;
    font-size: 11px;
    color: #aaa;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    margin-top: 4px;
}

/* Toast Notification */
.toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'VT323', monospace;
    font-size: 16px;
    z-index: 9999;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Achievement Popup */
.achievement-popup {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #333;
    padding: 16px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.achievement-popup.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.achievement-popup .achievement-icon {
    font-size: 32px;
}

.achievement-popup .achievement-text {
    display: flex;
    flex-direction: column;
}

.achievement-popup .achievement-title {
    font-size: 12px;
    font-family: 'VT323', monospace;
    text-transform: uppercase;
    opacity: 0.8;
}

.achievement-popup .achievement-name {
    font-size: 18px;
    font-family: 'VT323', monospace;
    font-weight: bold;
}

/* Hint revealed animation */
.grid-slot.hint-revealed {
    animation: hintGlow 0.5s ease;
}

@keyframes hintGlow {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 15px #ffd700, inset 0 0 10px rgba(255, 215, 0, 0.3); }
}

/* Leaderboard entry styling */
.leaderboard-entry {
    display: flex;
    align-items: center;
    padding: 10px 8px;
    border-bottom: 1px solid #ddd;
    gap: 12px;
}

.leaderboard-entry.top-three {
    background: rgba(255, 215, 0, 0.1);
}

.leaderboard-entry .rank {
    width: 32px;
    font-size: 18px;
    text-align: center;
}

.leaderboard-entry .name {
    flex: 1;
    font-size: 16px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-entry .stats {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
}

.leaderboard-list .empty,
.leaderboard-list .error {
    text-align: center;
    padding: 20px;
    color: #666;
    font-size: 14px;
}

/* Friends Modal */
.friends-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.friends-list .empty,
.friends-list .error,
.friends-list .loading {
    text-align: center;
    padding: 20px;
    color: #666;
    font-size: 14px;
}

.friend-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 8px;
    border-bottom: 1px solid #ddd;
}

.friend-name {
    font-size: 16px;
    color: #333;
}

.friend-streak {
    font-size: 14px;
    color: #ff6b00;
}

.invite-section {
    margin: 16px 0;
}

.invite-section h3 {
    font-size: 14px;
    margin-bottom: 8px;
    color: #555;
}

.invite-code-display {
    display: flex;
    gap: 8px;
    align-items: center;
}

.invite-code-display span {
    font-size: 24px;
    font-family: 'VT323', monospace;
    letter-spacing: 4px;
    background: #f5f5f5;
    padding: 8px 16px;
    border-radius: 4px;
    flex: 1;
    text-align: center;
}

.invite-input-row {
    display: flex;
    gap: 8px;
}

.invite-input-row input {
    flex: 1;
    padding: 8px 12px;
    font-size: 16px;
    font-family: 'VT323', monospace;
    letter-spacing: 2px;
    border: 2px solid #ccc;
    border-radius: 4px;
    text-align: center;
}

.mc-btn-small {
    background: #8b8b8b;
    border: none;
    color: white;
    padding: 8px 12px;
    font-family: 'VT323', monospace;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
}

.mc-btn-small:hover {
    background: #6b6b6b;
}

/* Friend Notification */
.friend-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.friend-notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'VT323', monospace;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.friend-notification.success .friend-notification-content {
    background: #4ade80;
    color: #000;
}

.friend-notification.error .friend-notification-content {
    background: #f87171;
    color: #000;
}

.friend-notification button {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
}

.friend-notification button:hover {
    opacity: 1;
}

/* Share button styling */
.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Clickable friend entries */
.friend-entry.clickable {
    cursor: pointer;
    transition: background 0.2s;
}

.friend-entry.clickable:hover {
    background: rgba(0,0,0,0.05);
}

.friend-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.friend-stats-mini {
    font-size: 12px;
    color: #888;
}

/* Friend Stats Modal */
.friend-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.stat-box {
    text-align: center;
    padding: 12px 8px;
    background: #f5f5f5;
    border-radius: 8px;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.stat-label {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

#friend-stats-content h3 {
    text-align: center;
    margin-bottom: 8px;
    font-size: 20px;
}