body {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei", sans-serif;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: #222;
    color: white;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#overlay-screen {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.95); display: flex; justify-content: center;
    align-items: center; flex-direction: column;
    z-index: 9999;
}

#start-panel, #game-over-panel {
    text-align: center;
    max-width: 85%;
}

.primary-btn {
    font-size: 20px; padding: 12px 30px;
    cursor: pointer; background: #2ecc71; border: none; border-radius: 50px;
    font-weight: bold; color: white; margin-top: 15px;
}

.small-btn {
    font-size: 14px; padding: 5px 10px;
    background: #e74c3c; border: none; border-radius: 5px; color: white;
    margin-top: 10px; cursor: pointer;
}

/* ---- 关卡选择 ---- */
#level-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
}
.level-btn {
    font-size: 16px; padding: 10px 18px;
    background: #3498db; border: none; border-radius: 8px;
    color: white; cursor: pointer; font-weight: bold;
}
.level-btn:hover { background: #2980b9; }
.level-btn.locked { background: #555; color: #888; cursor: not-allowed; }

/* ---- 道具选择弹窗 ---- */
#card-pick-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.92); display: flex; justify-content: center;
    align-items: center; flex-direction: column;
    z-index: 10000;
}
#card-pick-panel {
    text-align: center;
    max-width: 90%;
}
#card-pick-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 12px;
}
.pick-card {
    width: 70px; height: 80px;
    background: #ecf0f1;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 3px solid #bdc3c7;
    color: #333;
    font-size: 12px;
}
.pick-card .pick-emoji { font-size: 28px; }
.pick-card .pick-cost { color: #e67e22; font-weight: bold; }
.pick-card.picked { border-color: #f1c40f; box-shadow: 0 0 12px #f1c40f; background: #fef9e7; }

/* ---- 主容器 ---- */
#app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

#game-section {
    flex: 1;
    display: flex;
    flex-direction: row;
    position: relative;
    background: #333;
    min-height: 0;
}

#game-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #1a1a2e;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ---- 暂停遮罩 ---- */
.pause-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    display: flex; justify-content: center; align-items: center;
    z-index: 9998;
}

/* ---- 侧边栏 ---- */
#sidebar {
    width: 68px;
    background: #2c3e50;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-left: 2px solid #34495e;
    z-index: 20;
    padding: 4px 0;
}

.sidebar-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding-bottom: 6px;
    border-bottom: 1px solid #34495e;
}

.btn-end {
    font-size: 11px; padding: 3px 10px;
    background: #e74c3c; border: none; border-radius: 4px; color: white;
    cursor: pointer; width: 56px;
}

.btn-pause {
    font-size: 14px; padding: 3px 10px;
    background: #f39c12; border: none; border-radius: 4px; color: white;
    cursor: pointer; width: 56px;
}

.timer-box {
    font-size: 11px;
    color: #aaa;
    text-align: center;
    white-space: nowrap;
}

/* 弹性空白：把卡片推到积分上方 */
.sidebar-spacer {
    flex: 1;
}

/* 道具卡片区：从下往上排列，紧贴积分上方 */
.sidebar-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
    gap: 4px;
}

/* 卡片缩小 */
.card-slot {
    width: 58px; height: 56px;
    background: #ecf0f1;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid #bdc3c7;
    color: #333;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

.card-slot.selected { border-color: #f1c40f; box-shadow: 0 0 8px #f1c40f; }
.card-slot.disabled { opacity: 0.45; filter: grayscale(1); cursor: not-allowed; }

/* 冷却：直接变灰遮罩，无动画 */
.cd-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    pointer-events: none;
    z-index: 1;
    display: none;
}
.card-slot.on-cooldown .cd-overlay { display: block; }
.card-slot.on-cooldown { cursor: not-allowed; border-color: #777; }

.card-img { font-size: 20px; z-index: 2; line-height: 1; }
.card-name { font-size: 9px; z-index: 2; margin-top: 1px; white-space: nowrap; }
.card-cost {
    font-size: 10px;
    font-weight: bold;
    z-index: 2;
    color: #e67e22;
}

/* 积分 */
.sidebar-bottom {
    width: 100%;
    padding-top: 6px;
    border-top: 1px solid #34495e;
    text-align: center;
}

.score-box {
    font-size: 16px;
    font-weight: bold;
    color: #f1c40f;
    padding: 4px 0;
}