/* 基础样式 */
body {
    background: linear-gradient(135deg, #666666 0%, #333333 100%); /* 灰色渐变背景 */
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* 游戏主机容器 */
.gameboy {
    position: relative;
    min-width: 340px;
    width: 36%;
    border-radius: 20px;
    padding: 20px;
    background-color: #f3ba15; /* 金黄色背景 */
    background-image: url('../image/wenli.png'); /* 添加纹理图片 */
    background-size: 100% 100%; /* 图片完整显示 */
    background-repeat: no-repeat; /* 不平铺 */
    font-family: sans-serif;
    -webkit-user-select: none;
    cursor: default;
    padding-bottom: 60px;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 1);
    margin: 20px auto;
    /* 在移动设备上可能需要调整宽度 */
}

/* 为游戏主机添加半透明纹理覆盖层 */
.gameboy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../image/wenli.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0.15; /* 15% 透明度 */
    border-radius: 20px;
    pointer-events: none; /* 不影响按钮操作 */
    z-index: 0; /* 置于底层 */
}

/* 确保内容位于纹理层上方 */
.gameboy > * {
    position: relative;
    z-index: 1;
}

/* 游戏标题 */
.xiaoben-play-title {
    text-align: center;
    color: #cb7312;
    font-size: 18px;
    margin: 10px 0;
    font-weight: bold;
}

/* 屏幕区域 */
.screen-area {
    position: relative;
    border-radius: 15px 15px 15px 15px;
    background-color: #000000; /* 纯黑色背景 */
    color: #67879a;
}

.display {
    height: auto;
    width: 100%;
    border-radius: 15px;
    text-align: center;
}

#xben-canvas {
    border-radius: 15px;
}

/* 电源指示灯 */
.nintendo {
    text-align: center;
    margin-top: 10px;
    color: #fff;
    font-size: 12px;
}

.nintendo .power {
    position: absolute;
    display: block;
    width: 50px;
    left: 30px;
    font-size: 10px;
    letter-spacing: -0.5px;
    text-align: center;
}

.nintendo .power .indicator {
    line-height: 14px;
}

.nintendo .power .indicator .led {
    position: relative;
    display: inline-block;
    background-color: #00ff33;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0px 0px 10px #ff552e;
    animation: fade 600ms infinite;
    -webkit-animation: fade 600ms infinite;
}

/* LED闪烁动画 */
@keyframes fade {
    from {
        opacity: 1.0;
    }
    50% {
        opacity: 0.4;
    }
    to {
        opacity: 1.0;
    }
}

@-webkit-keyframes fade {
    from {
        opacity: 1.0;
    }
    50% {
        opacity: 0.4;
    }
    to {
        opacity: 1.0;
    }
}

/* 控制器样式 */
.controls {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding: 0 10px;
    min-height: 140px; /* 确保有足够空间容纳按钮 */
}

/* 方向键 */
#left {
    position: relative;
    width: 120px;
    height: 120px;
}

.nipple_l {
    width: 100%;
    height: 100%;
    position: relative;
}

.front_l {
    width: 40%;
    height: 40%;
    background-color: #000000 !important;
    border-radius: 50%;
    position: absolute;
    top: 30%;
    left: 30%;
    z-index: 2;
}

.back_l {
    width: 100%;
    height: 100%;
    background-image: url('../image/joy_back.png');
    background-size: cover;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
}

/* A/B按钮 */
.a-b {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.button-row {
    display: flex;
    gap: 10px;
}

.b, .a, .ab {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #ffdf7e; /* 浅黄色文字 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    user-select: none;
    background-color: #2e3444; /* 深蓝色按钮 */
    border: 1px solid #1e2330;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.ab {
    font-size: 16px;
    background-color: #2e3444; /* 深蓝色按钮，与A和B按钮保持一致 */
}

/* Start/Select按钮 */
.start-select {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
}

.select, .start {
    width: 80px;
    height: 25px;
    border-radius: 12px;
    color: #ffdf7e; /* 浅黄色文字 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    user-select: none;
    background-color: #2e3444; /* 深蓝色按钮 */
    border: 1px solid #1e2330;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

/* 侧边栏样式已移除 */

/* 模态框样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* 按钮样式 */
.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

/* 表格样式 */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.table th,
.table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.table th {
    background-color: #f2f2f2;
}

/* 存档列表样式 */
.list-group {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-group li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.list-group li:hover {
    background-color: #f5f5f5;
}

/* 响应式设计 */
@media (max-width: 768px) {
    body {
        padding: 0;
        margin: 0;
        background: linear-gradient(135deg, #666666 0%, #333333 100%); /* 保持灰色渐变背景 */
        overflow: hidden; /* 防止页面滚动 */
        box-sizing: border-box; /* 确保边框和内边距不增加总宽度 */
        -webkit-overflow-scrolling: touch;
    }
    
    .gameboy {
        position: fixed; /* 使用fixed定位覆盖全屏 */
        top: 6px;
        left: 2px;
        right: 2px;
        bottom: 6px;
        width: calc(100% - 4px); /* 确保宽度不会超出屏幕 */
        height: auto; /* 不再固定高度 */
        margin: 0;
        border-radius: 0; /* 移除圆角 */
        padding: 15px;
        padding-bottom: 80px; /* 增加底部内边距，为Start/Select按钮留出空间 */
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 1); /* 保持阴影效果 */
        background-color: #f3ba15; /* 金黄色背景 */
        display: flex;
        flex-direction: column;
        z-index: 1000;
        box-sizing: border-box; /* 确保边框和内边距不增加总宽度 */
        overflow: hidden; /* 防止子元素溢出 */
        max-width: 100vw; /* 最大宽度为视口宽度 */
        max-height: 100vh; /* 最大高度为视口高度 */
    }
    
    .gameboy::before {
        border-radius: 0; /* 移除伪元素的圆角 */
    }
    
    .screen-area {
        height: 50vh; /* 屏幕区域占据手机屏幕的1/2 */
        min-height: 0; /* 允许压缩 */
    }
    
    .display {
        height: 100%; /* 填满父容器 */
    }
    
    .controls {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: 0;
        padding-bottom: 60px; /* 为Start/Select按钮留出空间 */
        margin-top: 20px; /* 调整顶部边距，使控制区域上移 */
    }
    
    /* 方向键位于左下角 */
    #left {
        position: relative;
        width: 120px;
        height: 120px;
        flex-shrink: 0;
    }
    
    /* A/B按钮位于右下角 */
    .a-b {
        flex-direction: column;
        flex-shrink: 0;
        gap: 10px;
        align-items: center;
    }
    
    .button-row {
        display: flex;
        gap: 10px;
    }
    
    /* 增大按钮尺寸以适应触摸操作 */
    .b, .a, .ab {
        width: 60px;
        height: 60px;
        font-size: 18px;
        /* 增强移动设备上的质感效果 */
        box-shadow: inset 0 3px 4px rgba(255,255,255,0.6), 
                    inset 0 -3px 4px rgba(0,0,0,0.5), 
                    0 0 6px rgba(0,0,0,0.8);
    }
    
    .ab {
        font-size: 16px;
    }
    
    /* Start/Select按钮放在底部中央 */
    .start-select {
        position: absolute;
        bottom: 85px;
        left: 50%;
        transform: translateX(-50%);
        gap: 30px;
        margin: 0;
    }
}