body {
    margin: 0;
    padding: 0;
    /* 清新草地背景 */
    background-color: #ccefac;
    background-image: 
        radial-gradient(#b8e094 15%, transparent 16%),
        radial-gradient(#b8e094 15%, transparent 16%);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
    color: #5d4037; /* 深棕色文字 */
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    text-shadow: none;
}

/* 移除赛博朋克扫描线 */
body::after {
    display: none;
}

.header {
    width: 100%;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    box-sizing: border-box;
    font-weight: 800;
    z-index: 10;
    color: #5d4037;
    font-size: 18px;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-icon {
    background: #fff;
    border: 2px solid #5d4037;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 0 rgba(0,0,0,0.1);
    transition: all 0.1s;
}

.btn-icon:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0,0,0,0.1);
}


#game-container {
    flex: 1;
    width: 100%;
    max-width: 480px;
    position: relative;
    background: transparent; /* 透明背景，透出body的草地 */
    border: none;
    box-shadow: none;
    overflow: hidden;
    z-index: 1;
}

/* --- 卡通立体卡牌 --- */
.card {
    width: 48px;
    height: 52px; /* 稍微高一点，留给厚度 */
    background: #fffcf5; /* 米白 */
    border: none;
    border-radius: 8px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 6px; /* 文字上移，避开厚度区 */
    box-sizing: border-box;
    font-size: 26px;
    cursor: pointer;
    z-index: 10;
    user-select: none;
    color: #333;
    
    /* 核心立体效果 */
    box-shadow: 
        0 6px 0 #dcd0b6, /* 厚度颜色 */
        0 10px 10px rgba(0,0,0,0.2); /* 投影 */
    transition: transform 0.1s, box-shadow 0.1s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 0 #dcd0b6,
        0 15px 15px rgba(0,0,0,0.2);
    z-index: 999 !important;
}

.card:active {
    transform: translateY(4px);
    box-shadow: 
        0 2px 0 #dcd0b6,
        0 5px 5px rgba(0,0,0,0.2);
}

.card.in-slot {
    position: static;
    margin: 0 3px;
    transform: none !important;
    cursor: default;
    width: 45px; height: 45px; /* 槽位里变小一点 */
    padding-bottom: 0;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.1); /* 槽位里扁平一点 */
    background: #fff;
    border: 2px solid #5d4037;
}

.card.disabled {
    filter: brightness(0.6); /* 变暗 */
    background-color: #ddd; /* 灰色底 */
    pointer-events: none;
    box-shadow: 0 6px 0 #999; /* 灰色厚度 */
}

/* --- 木质/边框槽位 --- */
#slot-area {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    height: 70px;
    background: #8d6e63; /* 木头色 */
    border-radius: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    border: 4px solid #5d4037;
    box-shadow: 0 10px 0 #3e2723; /* 槽位也有厚度 */
    z-index: 100;
    background-image: none;
}

/* --- Q版按钮 --- */
.footer-controls {
    display: flex;
    gap: 15px;
    margin: 20px 0;
    z-index: 10;
}
.btn-powerup {
    background: #ffecb3;
    border: 2px solid #5d4037;
    color: #5d4037;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 0 #5d4037; /* 按钮立体感 */
    text-transform: none;
    transition: all 0.1s;
    clip-path: none;
}
.btn-powerup:hover {
    background: #fff8e1;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #5d4037;
}
.btn-powerup:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #5d4037;
}

.menu-bar {
    width: 100%;
    max-width: 480px;
    display: flex;
    justify-content: space-around;
    padding-bottom: 30px;
    z-index: 10;
}
.menu-bar button {
    background: #4fc3f7; /* 亮蓝 */
    color: #fff;
    border: 2px solid #01579b;
    padding: 10px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
    box-shadow: 0 5px 0 #01579b;
    clip-path: none;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}
.menu-bar button:hover {
    background: #29b6f6;
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #01579b;
}
.menu-bar button:active {
    transform: translateY(5px);
    box-shadow: 0 0 0 #01579b;
}

/* --- 弹窗 卡通白板 --- */
.modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}
.modal-content {
    background: #fff;
    color: #5d4037;
    padding: 30px;
    border: 4px solid #5d4037;
    border-radius: 20px;
    width: 80%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 10px 0 rgba(0,0,0,0.2);
    position: relative;
}
/* 移除之前的赛博角标 */
.modal-content::before, .modal-content::after {
    display: none;
}

.modal h2 {
    color: #ff7043; /* 橙红色 */
    text-transform: none;
    letter-spacing: normal;
    border-bottom: 2px dashed #ffccbc;
    padding-bottom: 10px;
    margin-top: 0;
    font-size: 24px;
}

.btn-primary {
    background: #66bb6a; /* 绿色 */
    color: #fff;
    border: 2px solid #2e7d32;
    padding: 12px 30px;
    border-radius: 30px;
    margin: 10px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 800;
    font-family: inherit;
    clip-path: none;
    box-shadow: 0 5px 0 #2e7d32;
}
.btn-primary:hover {
    background: #81c784;
    box-shadow: 0 7px 0 #2e7d32;
    transform: translateY(-2px);
}
.btn-primary:active {
    transform: translateY(5px);
    box-shadow: none;
}

.btn-secondary {
    background: #bdbdbd;
    color: #fff;
    border: 2px solid #616161;
    padding: 10px 25px;
    border-radius: 25px;
    margin: 10px;
    cursor: pointer;
    font-weight: bold;
    font-family: inherit;
    box-shadow: 0 4px 0 #616161;
}
.btn-secondary:hover {
    background: #e0e0e0;
    color: #333;
    box-shadow: 0 6px 0 #616161;
}

/* 排行榜 */
.rank-list {
    list-style: none;
    padding: 0;
    text-align: left;
    max-height: 200px;
    overflow-y: auto;
    border: 2px dashed #d7ccc8;
    background: #fff8e1;
    border-radius: 10px;
    padding: 10px;
}
.rank-list li {
    border-bottom: 1px dashed #d7ccc8;
    padding: 10px 5px;
    font-size: 16px;
    color: #5d4037;
}
.rank-list li:nth-child(1) { color: #d32f2f; text-shadow: none; font-weight: bold; }
.rank-list li:nth-child(2) { color: #f57c00; font-weight: bold; }
.rank-list li:nth-child(3) { color: #fbc02d; font-weight: bold; }

/* 转盘 */
.wheel {
    width: 140px; height: 140px;
    border-radius: 50%;
    background: conic-gradient(
        #ffecb3 0% 25%, 
        #b2dfdb 25% 50%, 
        #ffccbc 50% 75%, 
        #e1bee7 75% 100%
    );
    border: 6px solid #fff;
    box-shadow: 0 8px 0 rgba(0,0,0,0.1);
    margin: 20px auto;
    display: flex; justify-content: center; align-items: center;
    font-size: 30px; color: white; text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
    position: relative;
}
.wheel::after {
    content: '▼';
    position: absolute;
    top: -25px;
    color: #ff7043;
    font-size: 24px;
}