/* ============================================
   📱 手机端自适配（<=820px 生效）
   ============================================ */

html, body {
    margin: 0;
    padding: 0;
    background: #0d1b2a;
    overflow-x: hidden;
}

/* 游戏容器 - 宽度铺满 */
#game-wrapper {
    width: 100vw !important;
    border: none !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Canvas等比缩放 */
#gameCanvas {
    width: 100vw !important;
    height: auto !important;
    display: block !important;
}

/* ---- HUD ---- */
#hud {
    top: 4px !important;
    right: 6px !important;
}
#hud .hud-row {
    font-size: 11px !important;
    line-height: 1.6 !important;
}

/* ---- 音效按钮 ---- */
#sound-toggle {
    top: 4px !important;
    left: 6px !important;
    font-size: 9px !important;
    padding: 6px 10px !important;
    z-index: 20 !important;
}

/* ---- 状态效果 ---- */
#status-effects {
    top: 70px !important;
    right: 6px !important;
}

/* ---- 通用弹窗 ---- */
.modal-overlay {
    padding: 10px !important;
}
.modal-box {
    max-width: 96vw !important;
    width: 96vw !important;
    padding: 18px 14px !important;
}
.modal-box h2 {
    font-size: 18px !important;
    margin-bottom: 12px !important;
}

/* ---- 弹窗内容区 - 改为上下布局 ---- */
.modal-content {
    flex-direction: column !important;
    gap: 16px !important;
}
.modal-left {
    width: 100% !important;
}
.modal-right {
    width: 100% !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
}
/* 烤仔+文字占满一行 */
.modal-right .kazai-avatar,
.modal-right .modal-text {
    flex-shrink: 0;
}
/* 按钮容器占满一行 */
.modal-right > div:last-child {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

/* ---- 烤仔形象 ---- */
.kazai-avatar {
    width: 100px !important;
    height: 100px !important;
}
.kazai-avatar img {
    width: 100px !important;
    height: 100px !important;
}

/* ---- 弹窗文字 ---- */
.modal-text {
    font-size: 12px !important;
    line-height: 1.6 !important;
}
.text-cn {
    font-size: 12px !important;
}
.key-highlight {
    font-size: 12px !important;
    padding: 2px 6px !important;
}

/* ---- 表格 ---- */
.score-table {
    font-size: 10px !important;
    margin: 8px 0 !important;
}
.score-row {
    padding: 5px 6px !important;
    font-size: 10px !important;
}
.score-header {
    font-size: 10px !important;
}
.table-icon {
    width: 20px !important;
    height: 20px !important;
    margin-right: 0 !important;
}
.col-item { min-width: 60px !important; font-size: 10px !important; }
.col-score { min-width: 45px !important; font-size: 10px !important; }
.col-effect { min-width: 45px !important; font-size: 9px !important; }

/* ---- 弹窗按钮 ---- */
.modal-box button {
    font-size: 12px !important;
    padding: 10px 20px !important;
    letter-spacing: 1px !important;
}

/* ---- 通关/失败弹窗文字 ---- */
#win-text, #lose-text {
    font-size: 13px !important;
}

/* ---- 登录弹窗 ---- */
.login-box {
    max-width: 92vw !important;
    width: 92vw !important;
    padding: 28px 20px 24px !important;
}
.login-box h2 {
    font-size: 18px !important;
    margin-bottom: 16px !important;
}
.login-box p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
}
.login-box input {
    font-size: 14px !important;
    padding: 12px 14px !important;
}
.login-box button {
    font-size: 14px !important;
    padding: 12px 32px !important;
}

/* ---- 英雄榜弹窗 ---- */
.leaderboard-box {
    max-width: 94vw !important;
    width: 94vw !important;
    padding: 24px 16px 20px !important;
}
.leaderboard-box h2 {
    font-size: 18px !important;
    margin-bottom: 14px !important;
}
.lb-table th {
    font-size: 11px !important;
    padding: 8px 4px !important;
}
.lb-table td {
    font-size: 11px !important;
    padding: 8px 4px !important;
}
.lb-close-btn {
    font-size: 12px !important;
    padding: 10px 28px !important;
}

/* ---- 加载画面 ---- */
#loading-screen div:first-child {
    font-size: 12px !important;
}
#loading-text {
    font-size: 7px !important;
}

/* ---- 多按钮容器 ---- */
.modal-buttons {
    gap: 8px !important;
}
.modal-buttons button {
    font-size: 12px !important;
    padding: 10px 20px !important;
}

/* ============================================
   📱 超小屏适配（<=400px）
   ============================================ */
@media screen and (max-width: 400px) {
    .modal-box {
        padding: 14px 10px !important;
    }
    .modal-box h2 {
        font-size: 16px !important;
    }
    .score-row {
        padding: 4px 4px !important;
        font-size: 9px !important;
    }
    .table-icon {
        width: 16px !important;
        height: 16px !important;
    }
    .icon-cfx,
    .icon-zhaoshang {
        width: 20px !important;
        height: 20px !important;
    }
    .col-item { min-width: 50px !important; }
    .col-score { min-width: 38px !important; }
    .col-effect { min-width: 38px !important; font-size: 8px !important; }
    .kazai-avatar,
    .kazai-avatar img {
        width: 80px !important;
        height: 80px !important;
    }
    .modal-text,
    .text-cn {
        font-size: 11px !important;
    }
    #hud .hud-row {
        font-size: 10px !important;
    }
    .login-box h2 {
        font-size: 16px !important;
    }
    .login-box p {
        font-size: 12px !important;
    }
}

/* ============================================
   💻 大屏适配（>1200px）
   ============================================ */
@media screen and (min-width: 1200px) {
    #game-wrapper {
        margin: 20px auto !important;
    }
}