/* ========================================================
   Lazy Sheep Minecraft
   Player Profile Page
   ======================================================== */


/* ========================================================
   01. 基礎設定
   ======================================================== */

html {
    min-height: 100%;
    background: #111 url('/bg.png') center center / cover fixed no-repeat;
}

body {
    min-height: 100vh;

    margin: 0;
    padding: 0;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.30),
            rgba(0, 0, 0, 0.30)
        ),
        url('/bg.png') center center / cover fixed no-repeat;

    color: #fff;

    font-family:
        'Noto Sans TC',
        'Microsoft JhengHei',
        sans-serif;
}


/* ========================================================
   02. Player 主容器
   ======================================================== */

.player-container {
    width: 100%;
    max-width: 900px;

    margin: 40px auto;
    padding: 0 20px;

    box-sizing: border-box;
}


/* ========================================================
   03. 頁面標題
   ======================================================== */

.player-header {
    text-align: center;

    margin-bottom: 30px;
}

.player-title {
    margin: 0 0 12px 0;

    font-family:
        'Press Start 2P',
        monospace;

    font-size: 2rem;
    line-height: 1.5;

    color: #ffaa00;

    text-shadow:
        3px 3px 0 #000,
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000;
}

.player-subtitle {
    margin: 0;

    color: #d0d0d0;

    font-family:
        'Noto Sans TC',
        'Microsoft JhengHei',
        sans-serif;

    font-size: 0.95rem;
    font-weight: 400;

    line-height: 1.7;

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


/* ========================================================
   04. 搜尋卡片
   ======================================================== */

.search-card {
    width: 100%;

    box-sizing: border-box;

    margin-bottom: 24px;
    padding: 20px;

    background-color: rgba(26, 26, 26, 0.96);

    border: 4px solid #000;

    box-shadow:
        inset -2px -2px 0 #111,
        inset 2px 2px 0 #444,
        0 8px 20px rgba(0, 0, 0, 0.75);
}


/* ========================================================
   05. 搜尋表單
   ======================================================== */

.search-form {
    width: 100%;

    display: flex;
    align-items: stretch;

    gap: 10px;
}

.search-input {
    flex: 1;

    min-width: 0;

    box-sizing: border-box;

    padding: 12px 14px;

    background-color: #111;

    border: 2px solid #444;

    color: #fff;

    outline: none;

    font-family:
        'Noto Sans TC',
        'Microsoft JhengHei',
        sans-serif;

    font-size: 0.95rem;
    font-weight: 400;

    box-shadow:
        inset 2px 2px 0 #000;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.search-input::placeholder {
    color: #777;
}

.search-input:focus {
    border-color: #ffaa00;

    box-shadow:
        inset 2px 2px 0 #000,
        0 0 0 1px #ffaa00;
}


/* ========================================================
   06. 查詢按鈕
   ======================================================== */

.btn-search {
    flex-shrink: 0;

    box-sizing: border-box;

    padding: 12px 20px;

    background-color: #ffaa00;

    color: #000;

    border: 2px solid #000;

    font-family:
        'Noto Sans TC',
        'Microsoft JhengHei',
        sans-serif;

    font-size: 0.95rem;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        inset -2px -2px 0 #9f6f00,
        inset 2px 2px 0 #ffcf40;

    transition:
        background-color 0.1s ease,
        transform 0.1s ease;
}

.btn-search:hover {
    background-color: #ffbb22;
}

.btn-search:active {
    transform: translateY(2px);

    box-shadow:
        inset 2px 2px 0 #9f6f00;
}

.btn-search:disabled {
    opacity: 0.7;

    cursor: wait;
}


/* ========================================================
   07. 狀態訊息
   ======================================================== */

.info-status-msg {
    width: 100%;

    min-height: 145px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

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

    padding: 30px 20px;

    background-color: rgba(26, 26, 26, 0.96);

    color: #aaa;

    border: 4px solid #000;

    text-align: center;

    font-family:
        'Noto Sans TC',
        'Microsoft JhengHei',
        sans-serif;

    box-shadow:
        inset -2px -2px 0 #111,
        inset 2px 2px 0 #444,
        0 8px 20px rgba(0, 0, 0, 0.7);
}

.info-status-msg p {
    margin: 8px 0 0;

    line-height: 1.7;
}


/* ========================================================
   08. 玩家 Profile 卡片
   ======================================================== */

.profile-card {
    width: 100%;

    box-sizing: border-box;

    padding: 30px;

    background-color: rgba(26, 26, 26, 0.96);

    border: 4px solid #000;

    box-shadow:
        inset -2px -2px 0 #111,
        inset 2px 2px 0 #444,
        0 8px 20px rgba(0, 0, 0, 0.75);

    display: none;
}

.profile-card.active {
    display: block;
}


/* ========================================================
   09. 玩家基本資料
   ======================================================== */

.profile-header-info {
    display: flex;

    align-items: center;

    gap: 20px;

    padding-bottom: 24px;

    margin-bottom: 24px;

    border-bottom: 2px dashed #444;

    flex-wrap: wrap;
}


/* ========================================================
   10. Minecraft 玩家頭像
   ======================================================== */

.avatar-box {
    width: 80px;
    height: 80px;

    flex-shrink: 0;

    box-sizing: border-box;

    background-color: #222;

    border: 4px solid #000;

    display: flex;

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

    overflow: hidden;

    box-shadow:
        inset -2px -2px 0 #111,
        inset 2px 2px 0 #555;
}

.avatar-box img {
    width: 100%;
    height: 100%;

    display: block;

    image-rendering: pixelated;

    object-fit: cover;
}


/* ========================================================
   11. 玩家資訊
   ======================================================== */

.user-main-details {
    flex: 1;

    min-width: 200px;
}

.user-mc-id {
    margin: 0 0 6px 0;

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    color: #ffff55;

    font-family:
        'Noto Sans TC',
        'Microsoft JhengHei',
        sans-serif;

    font-size: 1.5rem;

    font-weight: 700;

    line-height: 1.4;

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

.user-email {
    color: #aaa;

    font-family:
        'Noto Sans TC',
        'Microsoft JhengHei',
        sans-serif;

    font-size: 0.9rem;

    line-height: 1.6;
}


/* ========================================================
   12. 方案 Badge
   ======================================================== */

.plan-badge-tag {
    display: inline-block;

    box-sizing: border-box;

    padding: 3px 9px;

    background-color: #555;

    color: #fff;

    border: 2px solid #000;

    font-family:
        'Noto Sans TC',
        'Microsoft JhengHei',
        sans-serif;

    font-size: 0.75rem;

    font-weight: 700;

    line-height: 1.4;

    text-shadow: none;
}

.plan-badge-tag.plan-super {
    background-color: #6355ff;

    color: #fff;
}

.plan-badge-tag.plan-plus {
    background-color: #ff5555;

    color: #fff;
}

.plan-badge-tag.plan-regular {
    background-color: #ffaa00;

    color: #000;
}

.plan-badge-tag.plan-free {
    background-color: #55ff55;

    color: #000;
}

.plan-badge-tag.plan-demo {
    background-color: #aaaaaa;

    color: #000;
}


/* ========================================================
   13. 統計資料 Grid
   ======================================================== */

.stats-grid {
    display: grid;

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

    gap: 14px;

    margin-bottom: 30px;
}


/* ========================================================
   14. 統計資料卡片
   ======================================================== */

.stat-box {
    min-width: 0;

    box-sizing: border-box;

    padding: 16px;

    background-color: #151515;

    border: 2px solid #000;

    box-shadow:
        inset -2px -2px 0 #080808,
        inset 2px 2px 0 #333;
}

.stat-label {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 8px;

    color: #aaa;

    font-family:
        'Noto Sans TC',
        'Microsoft JhengHei',
        sans-serif;

    font-size: 0.85rem;

    font-weight: 500;

    line-height: 1.5;
}

.stat-value {
    color: #55ff55;

    font-family:
        'Noto Sans TC',
        'Microsoft JhengHei',
        sans-serif;

    font-size: 1.25rem;

    font-weight: 700;

    line-height: 1.5;

    letter-spacing: 0.3px;

    word-break: break-word;
}

.stat-value small {
    color: #fff;

    font-family:
        'Noto Sans TC',
        'Microsoft JhengHei',
        sans-serif;

    font-size: 0.75rem;

    font-weight: 500;
}


/* ========================================================
   15. 歷史紀錄標題
   ======================================================== */

.history-section-title {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 16px;

    padding-left: 10px;

    border-left: 4px solid #ffaa00;

    color: #ffaa00;

    font-family:
        'Noto Sans TC',
        'Microsoft JhengHei',
        sans-serif;

    font-size: 1.05rem;

    font-weight: 700;

    line-height: 1.6;
}


/* ========================================================
   16. 表格容器
   ======================================================== */

.history-table-wrapper {
    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
}


/* ========================================================
   17. 歷史紀錄表格
   ======================================================== */

.history-table {
    width: 100%;

    min-width: 600px;

    border-collapse: collapse;

    background-color: #111;

    border: 2px solid #000;

    font-family:
        'Noto Sans TC',
        'Microsoft JhengHei',
        sans-serif;

    font-size: 0.9rem;
}

.history-table th,
.history-table td {
    padding: 12px 14px;

    text-align: left;

    border-bottom: 1px solid #333;

    line-height: 1.6;
}

.history-table th {
    background-color: #222;

    color: #ffaa00;

    font-weight: 700;
}

.history-table td {
    color: #ddd;

    font-weight: 400;
}

.history-table tr:hover {
    background-color: #1a1a1a;
}


/* ========================================================
   18. 發放狀態 Badge
   ======================================================== */

.status-badge {
    display: inline-block;

    box-sizing: border-box;

    padding: 2px 8px;

    border-radius: 2px;

    font-family:
        'Noto Sans TC',
        'Microsoft JhengHei',
        sans-serif;

    font-size: 0.8rem;

    font-weight: 700;

    line-height: 1.5;

    white-space: nowrap;
}

.status-pending {
    background-color: #ffaa00;

    color: #000;
}

.status-completed {
    background-color: #55ff55;

    color: #000;
}


/* ========================================================
   19. Toast
   ======================================================== */

.toast-msg {
    position: fixed;

    right: 30px;
    bottom: 30px;

    max-width: calc(100vw - 60px);

    box-sizing: border-box;

    padding: 14px 24px;

    background-color: rgba(0, 0, 0, 0.95);

    color: #fff;

    border: 3px solid #ffaa00;

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.8);

    display: none;

    z-index: 2000;

    font-family:
        'Noto Sans TC',
        'Microsoft JhengHei',
        sans-serif;

    font-size: 0.95rem;

    line-height: 1.6;

    text-align: center;
}


/* ========================================================
   20. Font Awesome 圖示
   ======================================================== */

.player-container i {
    font-family: "Font Awesome 6 Free";
}


/* ========================================================
   21. 平板 / 小型桌面
   ======================================================== */

@media (max-width: 750px) {

    .player-container {
        margin: 30px auto;

        padding: 0 15px;
    }

    .player-title {
        font-size: 1.55rem;
    }

    .search-form {
        flex-wrap: wrap;
    }

    .search-input {
        min-width: calc(50% - 5px);
    }

    .btn-search {
        width: 100%;
    }
}


/* ========================================================
   22. 手機
   ======================================================== */

@media (max-width: 600px) {

    .player-container {
        margin: 25px auto;

        padding: 0 10px;
    }

    .player-header {
        margin-bottom: 22px;
    }

    .player-title {
        font-size: 1.15rem;

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

    .player-subtitle {
        font-size: 0.82rem;
    }


    /* 搜尋 */

    .search-card {
        padding: 15px;

        border-width: 3px;
    }

    .search-form {
        flex-direction: column;

        gap: 9px;
    }

    .search-input {
        width: 100%;

        min-width: 0;
    }

    .btn-search {
        width: 100%;
    }


    /* 狀態 */

    .info-status-msg {
        min-height: 130px;

        padding: 25px 15px;

        border-width: 3px;
    }


    /* Profile */

    .profile-card {
        padding: 20px 15px;

        border-width: 3px;
    }

    .profile-header-info {
        flex-direction: column;

        text-align: center;

        gap: 14px;
    }

    .user-main-details {
        width: 100%;

        min-width: 0;
    }

    .user-mc-id {
        justify-content: center;

        font-size: 1.25rem;
    }

    .user-email {
        font-size: 0.82rem;
    }


    /* 統計 */

    .stats-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .stat-box {
        padding: 14px;
    }


    /* 歷史紀錄 */

    .history-section-title {
        font-size: 0.95rem;
    }

    .history-table {
        min-width: 580px;

        font-size: 0.82rem;
    }

    .history-table th,
    .history-table td {
        padding: 10px;
    }


    /* Toast */

    .toast-msg {
        left: 15px;
        right: 15px;
        bottom: 20px;

        max-width: none;

        padding: 12px 16px;

        font-size: 0.85rem;
    }
}


/* ========================================================
   23. 超小型手機
   ======================================================== */

@media (max-width: 400px) {

    .player-title {
        font-size: 0.95rem;
    }

    .player-subtitle {
        font-size: 0.78rem;
    }

    .profile-card {
        padding: 16px 12px;
    }

    .avatar-box {
        width: 72px;
        height: 72px;
    }

    .user-mc-id {
        font-size: 1.1rem;
    }

    .stat-value {
        font-size: 1.1rem;
    }
}