html,
body {
    margin: 0;
    height: 100%;
    background: #d0e7f9;
    /* 手机端工具条里的长名字偶尔会把页面撑宽，兜一下 */
    overflow-x: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.main {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    max-width: 1440px;
    border-radius: 10px;
    margin: auto;
    box-shadow: 0 0 0 5px #da4a4a, 0 0 0 20px #474f51;
    background: #da4a4a;
    height: 100%;
    padding: 10px;
}

.panel {
    position: relative;
    height: 100%;
    /* 上面留出工具条（选择游戏/最近玩过/暂停…）的位置 */
    padding: 58px 20px 20px;
    box-sizing: border-box;
    background: #f8f1d7;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    box-shadow: inset 8px 8px #fffef7;
}

/* 机身上方工具条 */
.nes-topbar {
    position: absolute;
    left: 20px;
    right: 168px; /* 给右上角的 LUYU-FAMILY 标志留位置 */
    top: 10px;
    height: 38px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}

.nes-topbar-left,
.nes-topbar-right {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* 左边这组允许收缩：游戏名很长时按钮自己变窄出省略号，而不是把页面撑出横向滚动条 */
.nes-topbar-left {
    flex: 0 1 auto;
    overflow: hidden;
}

.nes-topbar-right {
    flex: 0 0 auto;
    justify-content: flex-end;
}

/*
 * 右组里「放大」和「更多」原来严丝合缝贴在一起：
 * .nes-controls input 只有 margin-left、.nes-menu-btn 只有 margin-right，
 * 两个都没有朝内的边距，中间一条缝都没有。这里给「放大」补上右侧间距
 * （手机端那条 body.touch 规则覆盖面更大，仍是 2px，不受影响）。
 */
.nes-controls input {
    margin-right: 8px;
}

.nes-picker-btn,
.nes-continue-btn,
.nes-menu-btn {
    flex: 0 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0 12px;
    margin-right: 8px;
    font-size: 14px;
    font-weight: bold;
    color: #f8f1d7;
    background: #857b7a;
    border: 3px solid #474f51;
    border-radius: 10px;
    box-shadow: 0 3px 0 rgba(255, 255, 255, .7);
    outline: 0;
    cursor: pointer;
}

.nes-picker-btn,
.nes-continue-btn {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nes-menu-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ============ 「更多」下拉：暂停 / 重启 / 声音 / 调整按键位置 ============ */
.nes-menu {
    display: none;
}

.nes-menu.open {
    display: block;
    position: absolute;
    right: 20px;
    top: 62px;
    z-index: 58;
    min-width: 176px;
    padding: 8px;
    box-sizing: border-box;
    background: #f8f1d7;
    border: 6px solid #474f51;
    border-radius: 12px;
    box-shadow: 6px 6px 0 rgba(255, 255, 255, .8);
}

.nes-menu-actions {
    display: flex;
    flex-direction: column;
}

.nes-menu-actions input,
.nes-menu-actions .nes-menu-share,
.nes-menu-actions .nes-menu-orient,
.nes-menu-actions .nes-menu-pad,
.nes-menu-actions .nes-menu-screen,
.nes-menu-actions .nes-menu-adjust {
    width: 100%;
    height: 36px;
    margin: 0 0 6px;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: bold;
    color: #f8f1d7;
    background: #857b7a;
    border: 3px solid #474f51;
    border-radius: 9px;
    box-shadow: none;
    outline: 0;
    cursor: pointer;
}

.nes-menu-actions input:last-child {
    margin-bottom: 0;
}

.nes-menu-actions input:disabled {
    color: #cfc7c6;
    opacity: .6;
    cursor: default;
}

/* 设置类（浅底），和执行类按钮区分开 */
.nes-menu-actions .nes-menu-orient,
.nes-menu-actions .nes-menu-pad,
.nes-menu-actions .nes-menu-screen {
    color: #474f51;
    background: #fff;
}

/* 调整按键位置是触屏功能，电脑上不显示 */
.nes-menu-actions .nes-menu-adjust {
    color: #474f51;
    background: #efe6c8;
}

/* 这几个都是手机端设置，电脑上不显示 */
body:not(.touch) .nes-menu-adjust,
body:not(.touch) .nes-menu-orient,
body:not(.touch) .nes-menu-pad,
body:not(.touch) .nes-menu-screen {
    display: none;
}

.nes-status {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 10px;
    font-size: 12px;
    color: #6b625f;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nes-controls {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.nes-controls input {
    height: 34px;
    padding: 0 10px;
    margin-left: 8px;
    font-size: 13px;
    color: #f8f1d7;
    background: #857b7a;
    border: 3px solid #474f51;
    border-radius: 10px;
    box-shadow: 0 3px 0 rgba(255, 255, 255, .7);
    outline: 0;
    cursor: pointer;
}

.nes-controls input:disabled {
    color: #cfc7c6;
    opacity: .65;
    cursor: default;
}

/* 选游戏面板 */
.nes-picker {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 54px;
    bottom: 20px;
    /* 必须比屏幕按键(z-index 50)高：双保险，即使按键没被隐藏也压不住列表 */
    z-index: 55;
    display: none;
    flex-direction: column;
    box-sizing: border-box;
    padding: 12px;
    background: rgba(248, 241, 215, .99);
    border: 8px solid #474f51;
    border-radius: 15px;
    box-shadow: 8px 8px 0 rgba(255, 255, 255, .8);
}

.nes-picker.open {
    display: flex;
}

.nes-picker-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 6px;
}

.nes-picker-title {
    /* 不许被挤窄：默认 flex 项可收缩，字就被压成两行了 */
    flex: 0 0 auto;
    margin-right: 12px;
    font-size: 16px;
    white-space: nowrap;
    color: #474f51;
}

.nes-picker-search {
    flex: 1 1 140px; /* 挤不下时它自己换到下一行，而不是去压标题 */
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 15px;
    color: #474f51;
    background: #fff;
    border: 3px solid #474f51;
    border-radius: 10px;
    outline: 0;
}

.nes-picker-close {
    flex: 0 0 auto;
    height: 34px;
    margin-left: 10px;
    padding: 0 14px;
    font-size: 14px;
    white-space: nowrap;
    color: #f8f1d7;
    background: #857b7a;
    border: 3px solid #474f51;
    border-radius: 10px;
    outline: 0;
    cursor: pointer;
}

.nes-picker-tabs {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* 窄屏放不下就换行，不要把字挤断 */
    row-gap: 6px;
    margin: 10px 0 6px;
}

.nes-picker-tabs button {
    flex: 0 0 auto;
    height: 28px;
    margin-right: 8px;
    padding: 0 14px;
    font-size: 13px;
    white-space: nowrap;
    color: #474f51;
    background: #efe6c8;
    border: 3px solid #474f51;
    border-radius: 10px;
    outline: 0;
    cursor: pointer;
}

.nes-picker-tabs button.active {
    color: #f8f1d7;
    background: #da4a4a;
}

.nes-picker-count {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 6px;
    font-size: 12px;
    color: #8d8378;
    white-space: nowrap;
}

/* 按类型找：一排可横向滑动的按钮 */
.nes-picker-types {
    flex: 0 0 auto; /* 不加会被下面的列表压扁（overflow 容器的最小高度是 0） */
    display: flex;
    align-items: center;
    height: 32px;
    margin-bottom: 6px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.nes-picker-types.hidden {
    display: none;
}

.nes-picker-types button {
    flex: 0 0 auto;
    height: 26px;
    margin-right: 6px;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
    color: #474f51;
    background: #fff;
    border: 3px solid #474f51;
    border-radius: 10px;
    outline: 0;
    cursor: pointer;
}

.nes-picker-types button.active {
    color: #f8f1d7;
    background: #857b7a;
}

.nes-picker-list {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    background: #fff;
    border: 3px solid #474f51;
    border-radius: 10px;
}

.nes-picker-item {
    padding: 8px 10px;
    font-size: 14px;
    color: #474f51;
    border-bottom: 1px dashed #e6ddc0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.nes-picker-item:hover {
    background: #fdf3d8;
}

.nes-picker-item.current {
    color: #f8f1d7;
    background: #da4a4a;
}

.nes-picker-empty {
    padding: 12px 10px;
    font-size: 13px;
    color: #8d8378;
}

/* 模拟器跑不了的游戏 */
.nes-picker-item.unsupported {
    color: #a89e9b;
}

.nes-picker-bad {
    margin-left: 8px;
    padding: 0 6px;
    font-size: 11px;
    font-style: normal;
    color: #da4a4a;
    border: 2px solid #da4a4a;
    border-radius: 8px;
}

/* 窄屏（手机竖屏）：标题 + 关闭占一行，搜索框整行独占，
   否则搜索框会把"选择游戏"挤成两行 */
@media screen and (max-width: 620px) and (orientation: portrait) {
    .nes-picker-title {
        order: 1;
    }
    .nes-picker-close {
        order: 2;
        margin-left: auto;
    }
    .nes-picker-search {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
    }
}

/* 极窄屏（小屏手机）：顶部胶囊允许折成两行，
   不然"选择游戏/暂停/重启…"会被压成"选择…" */
@media screen and (max-width: 430px) {
    body.touch .nes-topbar {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 4px;
        padding: 4px 6px;
    }
    body.touch .nes-topbar-left,
    body.touch .nes-topbar-right {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 4px;
        max-width: 100%;
    }
    body.touch .nes-picker-btn,
    body.touch .nes-continue-btn,
    body.touch .nes-controls input {
        flex: 0 0 auto;
    }
}

.nes-picker-tabs .nes-picker-playable {
    background: #efe6c8;
}

.function-area {
    flex: 1;
    display: flex;
    padding: 0 20px;
    justify-content: center;
    flex-direction: column;
}

.controller-area {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: row;
    /* 长按要能稳稳判定：不让浏览器插手手势/选中/长按菜单 */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.action-area {
    display: flex;
    flex-direction: row;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.controller {
    position: relative;
    width: 140px;
    height: 140px;
    align-self: flex-end;
    filter: drop-shadow(5px 5px 0px rgba(255, 255, 255, .8));
}

.controller button {
    position: absolute;
    z-index: 1;
    border: 8px solid #474f51;
    background: #857b7a;
    color: transparent;
    border-radius: 15px;
    box-sizing: border-box;
    outline: 0;
    width: 56px;
    height: 56px;
    left: 50%;
    top: 50%;
    user-select: none;
    touch-action: none;
    transform: translate(-50%, -50%);
}

.controller::before {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    width: 56px;
    height: 56px;
    background: #857b7a;
    transform: translate(-50%, -50%);
}

.controller::after {
    content: '';
    z-index: 2;
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    width: 42px;
    height: 42px;
    border: 8px solid #474f51;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0px 8px 0 0px #736a6d, inset 0px -8px 0 0px rgba(255, 255, 255, .4);
}

button.up.joydirection {
    top: 0;
    transform: translate(-50%, 0);
    border-bottom: 0;
    height: 50px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: inset 0px 8px 0 0px rgba(255, 255, 255, .5);
}

button.right.joydirection {
    left: auto;
    right: 0;
    transform: translate(0, -50%);
    border-left: 0;
    width: 50px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    box-shadow: inset 8px 0 0 0px #857b7a, inset 6px 6px 0 0px rgba(255, 255, 255, .4), inset 8px -8px 0 0px rgba(0, 0, 0, .1);
}

button.down.joydirection {
    top: auto;
    transform: translate(-50%, 0);
    bottom: 0;
    border-top: 0;
    height: 50px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    box-shadow: inset 0px -8px 0 0px rgba(0, 0, 0, .1);
}

button.left.joydirection {
    left: 0;
    transform: translate(0, -50%);
    border-right: 0;
    width: 50px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    box-shadow: inset 0px 8px 0 0px rgba(255, 255, 255, .4), inset -8px 0px 0 0px #857b7a, inset -8px -8px 0 0px rgba(0, 0, 0, .1);
}

/* 十字键：按下的方向高亮，抬手即恢复 */
.controller button.active {
    background: #b9b1b0;
}

.function {
    display: flex;
    padding: 4px 14px;
    border-radius: 50px;
    align-self: center;
    background: #da4a4a;
    box-shadow: 5px 5px 0 rgba(255, 255, 255, .8);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.function button {
    user-select: none;
    margin: 6px 10px;
    height: 24px;
    width: 60px;
    outline: 0;
    border: 8px solid #474f51;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .1), inset 4px 4px 0 0px rgba(255, 255, 255, .4);
    background: #857b7a;
    color: transparent;
    border-radius: 15px;
}

.action {
    display: flex;
    align-self: flex-end;
}

.action button {
    user-select: none;
    width: 56px;
    height: 56px;
    background: #857b7a;
    border-radius: 50%;
    outline: 0;
    color: transparent;
    border: 8px solid #474f51;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, .8), inset 5px 8px 0 0px rgba(255, 255, 255, .4), inset -5px -8px 0 0px rgba(0, 0, 0, .1);
}

.action button:first-child {
    margin-right: 24px;
}

.sign {
    position: absolute;
    font-weight: bold;
    font-size: 20px;
    font-style: italic;
    height: 50px;
    right: 0;
    top: 0;
    background: #da4a4a;
    color: #f8f1d7;
    text-shadow: 0 -2px #fffef7;
    padding: 0 0 15px 15px;
    letter-spacing: 0.1em;
    border-bottom-left-radius: 15px;
    filter: drop-shadow(0 8px #fffef7)
}

.sign::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    left: -15px;
    top: 0;
    background: radial-gradient( circle at left bottom, transparent 14px, #da4a4a 15px);
}

.sign::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    bottom: -15px;
    right: 0;
    background: radial-gradient( circle at left bottom, transparent 14px, #da4a4a 15px);
}

.joy {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background: #857b7a;
    border-radius: 5px;
    text-align: center;
    line-height: 50px;
    color: #f8f1d7;
    font-weight: bold;
    font-size: 30px;
}

/* 按键说明入口：由 <a target="_blank"> 改成 <button>（点开弹窗），
   button 自带的边框/内边距要抹掉，不然会顶出 90x30 的框 */
.readme {
    position: absolute;
    left: 0;
    top: 90px;
    width: 90px;
    height: 30px;
    padding: 0;
    border: 0;
    background: #857b7a;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    color: #f8f1d7;
    font-family: inherit;
    font-weight: bold;
    font-size: 20px;
    outline: 0;
    cursor: pointer;
}

.readme:hover {
    background: #736a6d;
}

.screen {
    flex: 1;
    display: flex;
    width: 100%;
    transition: .3s;
    background: #000;
    margin-bottom: 5px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.screen #emulator {
    display: flex;
    align-items: center;
    justify-content: center;
}

.screen canvas {
    max-width: 100%;
    max-height: 100%;
    /* 像素画放大时不要平滑，256x240 的原始像素要清晰 */
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}

.nes-roms>select {
    width: 200px;
}

.nes-controls {
    margin-top: 2px;
}

@media screen and (orientation: portrait) {
    /*竖屏 css*/
    .main {
        max-height: 100%;
    }
    /* 竖屏窄，工具条换成两行，同时让出右上角标志的位置 */
    .panel {
        padding-top: 104px;
    }
    .nes-topbar {
        right: 20px;
        top: 10px;
        height: auto;
        flex-wrap: wrap;
        align-content: flex-start;
    }
    .nes-topbar-left,
    .nes-topbar-right {
        width: 100%;
    }
    .nes-topbar-right {
        margin-top: 6px;
    }
    .sign {
        display: none;
    }
    .function-area {
        position: absolute;
        left: 0;
        right: 0;
        /* 让开左上角的 I 方块和"按键说明"，屏幕框不要压到它们 */
        top: 240px;
        bottom: 100px;
        padding-bottom: 70px;
    }
    .function {
        position: absolute;
        bottom: 0;
        align-self: flex-end;
        transform: translateX(20px);
        padding: 8px 10px;
        border-radius: 50px 0 0 50px;
        box-shadow: 0px 5px 0 rgba(255, 255, 255, .8);
    }
    .function::before {
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        right: 0;
        top: -15px;
        background: radial-gradient( circle at left top, transparent 14px, #da4a4a 15px);
    }
    .function::after {
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        bottom: -15px;
        right: 0;
        background: radial-gradient( circle at left bottom, transparent 14px, #da4a4a 15px);
    }
    .screen {
        margin-bottom: 0;
    }
    .function button {
        width: 56px;
        margin: 10px;
    }
    .action-area {
        flex: 1;
        justify-content: flex-end;
    }
    .action button:first-child {
        margin-right: 20px
    }
}

@media screen and (orientation: landscape) {
    /*横屏 css*/
}

/* 矮屏（手机横屏）：画面高度是硬约束，
   把机身边距、工具条、Start/Select 药丸都压薄，尽量把高度让给游戏画面 */
@media screen and (max-height: 540px) and (orientation: landscape) {
    .main {
        padding: 6px;
    }
    .panel {
        padding: 46px 12px 8px;
    }
    .nes-topbar {
        left: 12px;
        right: 150px;
        top: 3px;
        height: 34px;
    }
    .nes-picker-btn,
    .nes-continue-btn,
    .nes-menu-btn,
    .nes-controls input {
        height: 28px;
        padding: 0 8px;
        font-size: 12px;
    }
    .nes-picker-btn,
    .nes-continue-btn,
    .nes-menu-btn,
    .nes-controls input {
        margin-right: 6px;
        margin-left: 6px;
    }
    /* 矮屏下工具条更贴顶，下拉也跟着上移 */
    .nes-menu.open {
        right: 12px;
        top: 42px;
        min-width: 160px;
        padding: 6px;
    }
    .nes-menu-actions input,
    .nes-menu-actions .nes-menu-orient,
    .nes-menu-actions .nes-menu-pad,
    .nes-menu-actions .nes-menu-screen,
    .nes-menu-actions .nes-menu-share,
    .nes-menu-actions .nes-menu-adjust {
        height: 30px;
        margin-bottom: 4px;
        font-size: 12px;
    }
    .nes-status {
        font-size: 11px;
    }
    .nes-picker {
        left: 12px;
        right: 12px;
        top: 40px;
        bottom: 8px;
        padding: 8px;
    }
    .nes-picker-tabs {
        margin: 6px 0 4px;
    }
    .nes-picker-tabs button,
    .nes-picker-types button {
        height: 22px;
        padding: 0 8px;
        font-size: 11px;
    }
    .nes-picker-types {
        height: 28px;
        margin-bottom: 4px;
    }
    .nes-picker-item {
        padding: 5px 8px;
        font-size: 13px;
    }
    .function {
        padding: 2px 10px;
    }
    .function button {
        height: 18px;
        margin: 2px 8px;
        border-width: 5px;
    }
    .sign {
        font-size: 16px;
        height: 40px;
        padding: 0 0 10px 10px;
    }
}

/* ============ 手机端整屏布局 ============
   画面左右不留边（曲面屏本来就有自然留边），上下留 10px；
   机身的红壳/米色面板/两侧控制列都收掉，方向键、A/B 浮在画面两侧，
   Start/Select 浮在方向键上方，工具条半透明浮在顶部（会自动淡出）。 */
body.touch .joy,
body.touch .readme,
body.touch .sign {
    display: none;
}

body.touch .main {
    max-width: none;
    padding: 10px 0; /* 左右不留边，交给曲面屏自己的留边 */
    border-radius: 0;
    background: #474f51;
    box-shadow: none;
}

body.touch .panel {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.touch .function-area {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 0;
}

body.touch .screen {
    margin-bottom: 0;
    border-radius: 10px;
}

/* 工具条：整体居中成一个小胶囊，浮在画面顶上，自动淡出 */
body.touch .nes-topbar {
    left: 50%;
    right: auto;
    top: 10px;
    width: auto;
    max-width: calc(100% - 16px);
    height: auto;
    padding: 4px 6px;
    box-sizing: border-box;
    transform: translateX(-50%);
    background: rgba(71, 79, 81, .85);
    border-radius: 12px;
    overflow: visible;
    flex-wrap: nowrap;
    transition: opacity .25s;
}

body.touch .nes-topbar.hide {
    opacity: 0;
    pointer-events: none;
}

body.touch .nes-topbar-left,
body.touch .nes-topbar-right {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
    flex-wrap: nowrap;
}

/* 竖向必须严格居中：竖屏那套规则给右组加过 margin-top，会把右侧按钮压下去 */
body.touch .nes-topbar,
body.touch .nes-topbar-left,
body.touch .nes-topbar-right,
body.touch .nes-controls {
    align-items: center;
}

body.touch .nes-topbar > *,
body.touch .nes-topbar-left > *,
body.touch .nes-topbar-right > *,
body.touch .nes-controls > * {
    margin-top: 0;
    margin-bottom: 0;
}

body.touch .nes-controls {
    height: 34px; /* 和按钮等高，避免容器多出 2px 导致按钮整体偏下 1px */
}

body.touch .nes-status {
    max-width: 64px;
    margin: 0 4px;
    font-size: 10px;
    line-height: 1;
    color: #f8f1d7;
    opacity: .8;
}

body.touch .nes-picker-btn,
body.touch .nes-continue-btn,
body.touch .nes-menu-btn,
body.touch .nes-controls input {
    height: 34px; /* 26px 太难点，抬高一点（工具条是次要按钮，不占游戏区） */
    margin: 0 2px;
    padding: 0 7px;
    font-size: 11px;
    border-width: 2px;
    border-radius: 8px;
    box-shadow: none;
    opacity: .95;
}

body.touch .nes-picker-btn {
    max-width: 92px;
}

/* 手机端"选游戏"按钮上已经写着当前游戏名了，"继续"按钮多余 */
body.touch .nes-continue-btn {
    display: none !important;
}

/* Start/Select：挪到方向键上方（不再压着游戏画面），
   并改成和其它虚拟按键一样的灰底样式（原来是带尾巴的红色药丸） */
body.touch .function,
body.touch .function::before,
body.touch .function::after {
    background: none;
    box-shadow: none;
}

body.touch .function {
    position: absolute;
    left: auto;
    right: 24px; /* 和 A·B 右边对齐 */
    bottom: 162px; /* 具体数值由 JS 按底边留白、A·B 高度和间距算 */
    z-index: 50;
    flex-direction: row;
    align-items: flex-end;
    padding: 0;
    opacity: 1;
}

body.touch .function::before,
body.touch .function::after {
    display: none;
}

/* 选择/开始：横排在 A·B 上方并和 A·B 左右对齐（跟着 A·B 一起缩放），显示"选择/开始"文字。
   高度 44px：达到规范要求的最小触控目标（iOS 44pt / Material 48dp） */
body.touch .function button {
    width: auto;
    min-width: 69px; /* 两枚 69px + 6px 间距 = A·B 那一排的宽度（56+32+56） */
    height: 44px;
    margin: 0 6px 0 0;
    padding: 0 10px;
    box-sizing: border-box;
    color: #f8f1d7;
    font-size: 13px;
    background: #857b7a;
    border: 3px solid #474f51;
    border-radius: 10px;
    box-shadow: none;
}

body.touch .function button:last-child {
    margin-right: 0;
}

/* 手机端 A·B 也把字母显示出来，免得不知道哪个是 A 哪个是 B */
body.touch .action button {
    position: relative; /* 给下面的"不可见点击区"做定位基准 */
    color: #f8f1d7;
    font-size: 14px;
    transition: background .1s, transform .1s;
}

/*
 * A/B 按钮下方补一块**不可见但可点**的区域：
 * 拇指从下往上推的时候落点更宽容，视觉完全不变。
 * 用按钮自己的伪元素，事件目标仍是按钮本身，所以 A/B 的监听照常触发。
 *
 * 注意 +8px / -14px 是按钮 8px 边框的补偿：绝对定位以 padding box 为准，
 * 不补的话实际范围会整体缩进 8px。
 */
body.touch .action button::after {
    content: '';
    position: absolute;
    left: -14px;
    right: -14px;
    top: calc(100% + 8px);
    height: 46px;
    background: transparent;
}

/* ============ XYAB 按键布局（「更多 → 按键布局」里可选） ============
   默认是掌上机 A·B，X/Y 隐藏；选了 XYAB 才出现，按钮小一圈。 */
.action .x,
.action .y {
    display: none;
}

body.pad-xyab-square .action .x,
body.pad-xyab-square .action .y,
body.pad-xyab-diamond .action .x,
body.pad-xyab-diamond .action .y {
    display: block;
}

body.touch.pad-xyab-square .action button,
body.touch.pad-xyab-diamond .action button {
    box-sizing: border-box;
    width: 46px;
    height: 46px;
    margin: 0;
    border-width: 6px;
    font-size: 12px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .8), inset 4px 6px 0 0 rgba(255, 255, 255, .4), inset -4px -6px 0 0 rgba(0, 0, 0, .1);
}

/* X / Y 的下扩点击区要去掉：它们正好压在下一排的 A/B 上（同层里后面的元素会盖住前面的） */
body.pad-xyab-square .action .x::after,
body.pad-xyab-square .action .y::after,
body.pad-xyab-diamond .action .x::after,
body.pad-xyab-diamond .action .y::after {
    display: none;
}

/* 小按钮边框是 6px，下扩区跟着改小一点 */
body.pad-xyab-square .action .a::after,
body.pad-xyab-square .action .b::after,
body.pad-xyab-diamond .action .a::after,
body.pad-xyab-diamond .action .b::after {
    top: calc(100% + 6px);
    height: 40px;
}

/* 2×2 正方形（上排 Y·X，下排 B·A） */
body.touch.pad-xyab-square .action #controls-fire {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "y x"
        "b a";
    gap: 14px;
}

body.touch.pad-xyab-square .action .y {
    grid-area: y;
}

body.touch.pad-xyab-square .action .x {
    grid-area: x;
}

body.touch.pad-xyab-square .action .b {
    grid-area: b;
}

body.touch.pad-xyab-square .action .a {
    grid-area: a;
}

/* 45° 菱形：X 上 / Y 左 / A 右 / B 下（标准手柄菱形） */
body.touch.pad-xyab-diamond .action #controls-fire {
    position: relative;
    width: 130px;
    height: 130px;
}

body.touch.pad-xyab-diamond .action button {
    position: absolute;
}

body.touch.pad-xyab-diamond .action .x {
    left: 42px;
    top: 0;
}

body.touch.pad-xyab-diamond .action .y {
    left: 0;
    top: 42px;
}

body.touch.pad-xyab-diamond .action .a {
    left: 84px;
    top: 42px;
}

body.touch.pad-xyab-diamond .action .b {
    left: 42px;
    top: 84px;
}

body.touch .function button {
    transition: background .1s, transform .1s;
}

/* 按下的视觉反馈：底色变亮 + 稍微缩一点 */
body.touch .action button.active,
body.touch .function button.active {
    background: #b9b1b0;
}

body.touch .action button.active {
    transform: scale(.92);
}

body.touch .function button.active {
    transform: translateY(2px);
}

/* 距屏幕侧边 24px：落在拇指舒适区内（规范建议 ≥ 屏宽 11%），也避开圆角/曲面 */
/* 底边留出距离：手持时大拇指要够得到（具体数值由 JS 按模式和可视视口算） */
body.touch .controller-area {
    position: absolute;
    left: 24px;
    bottom: 46px;
    z-index: 50;
}

body.touch .action-area {
    position: absolute;
    right: 24px;
    bottom: 46px;
    z-index: 50;
}

/* A·B 拉开一点间距，减少连击时误触到隔壁 */
body.touch .action button:first-child {
    margin-right: 32px;
}

body.zoom.touch .controller-area,
body.zoom.touch .action-area {
    bottom: 56px; /* 放大模式画面贴边，再多留一点 */
}

/* 放大模式：机身装饰全部让位，画面铺满整屏，
   方向键 / A·B 浮在两侧黑边上，Start·Select 半透明浮在下方 */
body.zoom .main {
    max-width: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

body.zoom .panel {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

body.zoom .sign,
body.zoom .joy,
body.zoom .readme,
body.zoom .nes-status {
    display: none;
}
/* 暂停 / 重启 / 声音 现在在下拉里，不用再单独隐藏（下拉不点开就是收着的） */

/* "继续"按钮是被 jQuery .show() 写成行内样式的，得用 !important 盖掉 */
body.zoom .nes-continue-btn {
    display: none !important;
}

/* 电脑上放大时工具条铺在顶部；手机上仍用 body.touch 的居中胶囊
   （不加 :not(.touch) 的话 left:50% 会和 right 打架，被拉成跑出屏幕的长条） */
body.zoom:not(.touch) .nes-topbar {
    left: 6px;
    right: 6px;
    top: 6px;
    height: auto;
    overflow: visible;
}

body.zoom .nes-picker-btn {
    max-width: 46vw;
    opacity: .8;
}

body.zoom .nes-zoom-btn {
    opacity: .8;
}

body.zoom .function-area {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 0;
}

body.zoom .screen {
    margin-bottom: 0;
    border-radius: 0;
}

/* 电脑上放大时把这几个控制件摆到屏幕中下；手机上沿用 body.touch 的位置（右侧对齐 A·B 上方） */
body.zoom:not(.touch) .function {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 50;
    transform: translateX(-50%);
    opacity: .55;
}

body.zoom:not(.touch) .controller-area {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 50;
}

body.zoom:not(.touch) .action-area {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 50;
}

/*
 * 手机端工具条已经改成居中的小胶囊（见上面 body.touch 那组规则），
 * 不再限制左右两组的宽度，所以这里不用再按黑边做换行了。
 */

/* 控制键的缩放改由 JS 按实际黑边宽度计算（fitTouchControls），比写死断点准 */

/* 手机端浮动摇杆的视觉反馈：按下处出现半透明圆环 + 摇杆头
   （摇杆头拖动时实时跟手，抬手先回中再淡出，不用瞬移） */
.nes-joystick-ring,
.nes-joystick-knob {
    position: fixed;
    display: none;
    z-index: 45;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.nes-joystick-ring {
    width: 108px;
    height: 108px;
    background: rgba(71, 79, 81, .22);
    border: 2px solid rgba(248, 241, 215, .35);
    transition: opacity .15s;
}

.nes-joystick-knob {
    width: 46px;
    height: 46px;
    background: rgba(248, 241, 215, .32);
}

.nes-joystick-ring.nes-joystick-out {
    opacity: 0;
}

.nes-joystick-knob.nes-joystick-out {
    opacity: 0;
    transition: left .14s, top .14s, opacity .16s;
}

/* ============ 调整按键位置（手机端长按按键区进入） ============ */
.nes-layout-mask,
.nes-layout-bar,
.nes-hint {
    display: none;
}

.nes-layout-mask.open {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    background: rgba(20, 24, 26, .45);
    touch-action: none;
}

.nes-layout-bar.open {
    display: flex;
    position: absolute;
    left: 50%;
    top: 10px;
    z-index: 80;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* 窄屏放不下就把按钮换到第二行，别把「完成」挤出屏幕 */
    row-gap: 4px;
    box-sizing: border-box;
    max-width: calc(100% - 16px);
    padding: 6px 10px;
    transform: translateX(-50%);
    background: rgba(71, 79, 81, .95);
    border-radius: 12px;
    color: #f8f1d7;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

.nes-layout-tip {
    margin-right: 8px;
}

.nes-layout-bar button {
    height: 30px;
    margin-left: 6px;
    padding: 0 10px;
    font-size: 12px;
    color: #f8f1d7;
    background: #857b7a;
    border: 2px solid #474f51;
    border-radius: 8px;
    outline: 0;
    cursor: pointer;
}

/* 可拖的四块（画面 + 三个按键区）加虚线框，提示"这块能拖" */
body.layout-edit .nes-screen,
body.layout-edit .controller-area,
body.layout-edit .action-area,
body.layout-edit .function {
    outline: 2px dashed rgba(248, 241, 215, .85);
    outline-offset: 6px;
    border-radius: 6px;
}

.nes-layout-active {
    outline-color: #ffd35c !important;
}

/* 放大方向选择框（手机上第一次点放大时问一次，之后长按可改） */
/* 通用选择框（放大方向 / 按键布局 / 画面位置共用这套样式） */
.nes-zoomask,
.nes-zoom-dialog,
.nes-padask,
.nes-pad-dialog,
.nes-screenask,
.nes-screen-dialog,
.nes-shareask,
.nes-share-dialog,
.nes-netask,
.nes-net-dialog,
.nes-saveask,
.nes-save-dialog {
    display: none;
}

.nes-zoomask.open,
.nes-padask.open,
.nes-screenask.open,
.nes-shareask.open,
.nes-netask.open,
.nes-saveask.open {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: rgba(20, 24, 26, .5);
}

.nes-zoom-dialog.open,
.nes-pad-dialog.open,
.nes-screen-dialog.open,
.nes-share-dialog.open,
.nes-net-dialog.open,
.nes-save-dialog.open {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 95;
    width: 320px;
    max-width: calc(100% - 32px);
    box-sizing: border-box;
    padding: 14px;
    transform: translate(-50%, -50%);
    text-align: center;
    background: #f8f1d7;
    border: 6px solid #474f51;
    border-radius: 15px;
    box-shadow: 6px 6px 0 rgba(255, 255, 255, .8);
}

.nes-zoom-title {
    margin: 0 0 6px;
    font-size: 16px;
    color: #474f51;
}

.nes-zoom-tip {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #8d8378;
}

.nes-zoom-choices,
.nes-pad-choices,
.nes-dpad-choices,
.nes-screen-choices {
    display: flex;
    flex-direction: column;
}

.nes-zoom-choices button,
.nes-pad-choices button,
.nes-dpad-choices button,
.nes-screen-choices button {
    height: 38px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #f8f1d7;
    background: #857b7a;
    border: 3px solid #474f51;
    border-radius: 10px;
    outline: 0;
    cursor: pointer;
}

/* 第一项是推荐项（放大方向=横屏；按键布局=掌上 A·B；画面位置=最上面） */
.nes-zoom-choices button:first-child,
.nes-pad-choices button:first-child,
.nes-dpad-choices button:first-child,
.nes-screen-choices button:first-child {
    background: #da4a4a;
}

/* 当前正在用的那项（按键布局 / 方向键样式） */
.nes-pad-choices button.active,
.nes-dpad-choices button.active {
    background: #da4a4a;
    box-shadow: inset 0 0 0 3px #f8f1d7;
}

/* 方向键样式这一组的"第一项"不特殊（它只是默认值，不是推荐项的红底），
   免得同时出现两个红块分不清哪个是当前用的 */
.nes-dpad-choices button:first-child {
    background: #857b7a;
}

/* 小屏横屏时弹窗别顶出屏幕（内容变多了） */
.nes-pad-dialog.open {
    max-height: 84vh;
    overflow-y: auto;
}

/* 方向键样式那组的小标题：挨着上一组，别顶太远 */
.nes-dpad-tip {
    margin: 4px 0 8px;
}

/* ============ 画面位置（竖屏上下有富余时把画面挪上/挪下） ============
   画面尺寸不变，只改竖直对齐。
   居中/贴顶靠 #emulator 的 align-items（.screen 会被 flex 拉伸成全高，
   真正把 canvas 竖直居中/贴顶的就是它）。
   「靠下」还要躲开按键区：JS 会把 #emulator 压矮到按键上方（fitTouchControls），
   同时这里让 .screen 别再把变矮的 #emulator 拉回竖直居中。 */
body.touch.screen-pos-top #emulator {
    align-items: flex-start;
}

body.touch.screen-pos-bottom .screen {
    align-items: flex-start;
}

body.touch.screen-pos-bottom #emulator {
    align-items: flex-end;
}

.nes-zoom-cancel {
    height: 30px;
    padding: 0 16px;
    font-size: 13px;
    color: #474f51;
    background: #efe6c8;
    border: 3px solid #474f51;
    border-radius: 10px;
    outline: 0;
    cursor: pointer;
}

.nes-zoom-note {
    margin: 8px 0 0;
    font-size: 11px;
    color: #a89e9b;
}

/* 分享弹窗里的链接框：只读，打开时自动全选，长按或 Ctrl/Cmd+C 就能复制 */
.nes-share-link {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 8px;
    font-size: 12px;
    color: #474f51;
    background: #fff;
    border: 3px solid #474f51;
    border-radius: 8px;
    outline: 0;
}

/* 第一次开玩时提示一次"长按可调整按键" */
.nes-hint.open {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 60;
    padding: 6px 12px;
    transform: translateX(-50%);
    background: rgba(71, 79, 81, .9);
    border-radius: 12px;
    color: #f8f1d7;
    font-size: 12px;
    white-space: nowrap;
}

/* 选游戏面板打开时，屏幕上的方向键/A·B/选择·开始/浮动摇杆全部收起来，别压着列表 */
body.picker-open .controller-area,
body.picker-open .action-area,
body.picker-open .function,
body.picker-open .nes-joystick-ring,
body.picker-open .nes-joystick-knob {
    display: none !important;
}

/* 选游戏面板底部：调整按键位置入口 */
.nes-picker-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 8px;
}

.nes-picker-adjust {
    height: 30px;
    padding: 0 12px;
    font-size: 13px;
    color: #f8f1d7;
    background: #857b7a;
    border: 3px solid #474f51;
    border-radius: 10px;
    outline: 0;
    cursor: pointer;
}

body:not(.touch) .nes-picker-foot {
    display: none; /* 拖拽是触屏功能，电脑上不显示 */
}

/* ============ 联机对战面板 ============
   外壳复用 .nes-netask / .nes-net-dialog（和放大/分享那套弹窗同一副骨架），
   这里只管里面的行、房间号、按钮、日志。 */
.nes-netbar-btn.on {
    background: #da4a4a; /* 已进房间/正在联机时变红，一眼能看出来 */
}

.nes-net-dialog .nes-net-status {
    margin: 0 0 10px;
    padding: 8px;
    font-size: 12px;
    line-height: 1.6;
    color: #474f51;
    background: #efe6c8;
    border: 3px solid #474f51;
    border-radius: 8px;
}

.nes-net-code {
    display: block;
    margin: 2px 0 6px;
    font-family: Menlo, Consolas, monospace;
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 6px;
    text-align: center;
    color: #da4a4a;
}

.nes-net-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.nes-net-input {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    height: 34px;
    margin: 0 6px 0 0;
    padding: 0 8px;
    font-size: 13px;
    color: #474f51;
    background: #fff;
    border: 3px solid #474f51;
    border-radius: 8px;
    outline: 0;
}

.nes-net-btn {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: bold;
    color: #f8f1d7;
    background: #857b7a;
    border: 3px solid #474f51;
    border-radius: 10px;
    outline: 0;
    cursor: pointer;
    white-space: nowrap;
}

.nes-net-btn.primary {
    background: #da4a4a;
}

.nes-net-btn:disabled {
    opacity: .55;
    cursor: default;
}

.nes-net-hint {
    margin: 0 0 8px;
    font-size: 11px;
    line-height: 1.5;
    color: #8d8378;
}

.nes-net-log {
    max-height: 88px;
    margin: 0 0 8px;
    padding: 6px 8px;
    overflow-y: auto;
    font-size: 11px;
    line-height: 1.5;
    color: #6f665f;
    background: #fff;
    border: 3px solid #474f51;
    border-radius: 8px;
    word-break: break-all;
}

.nes-net-ping {
    margin: 0 0 8px;
    font-size: 11px;
    color: #8d8378;
}

.nes-net-delay {
    height: 30px;
    font-size: 12px;
    color: #474f51;
    background: #fff;
    border: 3px solid #474f51;
    border-radius: 8px;
    outline: 0;
}

/* ============ 存档 / 读档 ============
   外壳同样复用弹窗骨架（.nes-saveask / .nes-save-dialog），这里只排里面的列表行。 */
.nes-save-list {
    max-height: 46vh;
    margin: 0 0 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 3px solid #474f51;
    border-radius: 8px;
}

.nes-save-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 6px 8px;
    font-size: 12px;
    color: #474f51;
    border-bottom: 1px dashed #e6ddc0;
}

.nes-save-row:last-child {
    border-bottom: 0;
}

.nes-save-row.current {
    background: #fdf3d8;
}

.nes-save-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
}

.nes-save-here {
    margin-left: 6px;
    padding: 0 5px;
    font-size: 10px;
    font-style: normal;
    color: #da4a4a;
    border: 2px solid #da4a4a;
    border-radius: 7px;
}

.nes-save-meta {
    flex: 0 0 100%;
    order: 3;
    margin-top: 2px;
    font-size: 11px;
    color: #8d8378;
}

.nes-save-btn {
    flex: 0 0 auto;
    height: 26px;
    margin-left: 6px;
    padding: 0 10px;
    font-size: 12px;
    color: #f8f1d7;
    background: #857b7a;
    border: 2px solid #474f51;
    border-radius: 8px;
    outline: 0;
    cursor: pointer;
}

.nes-save-btn.nes-save-del {
    color: #474f51;
    background: #efe6c8;
}

.nes-save-empty {
    margin: 0;
    padding: 12px 10px;
    font-size: 12px;
    line-height: 1.6;
    color: #8d8378;
}

.nes-save-usage {
    margin: 0 0 8px;
    font-size: 11px;
    color: #8d8378;
}

/* 存档列表里的"这款有档"小标（对比"跑不了"那个红标，这个用绿） */
.nes-picker-has-save {
    margin-left: 8px;
    padding: 0 6px;
    font-size: 11px;
    font-style: normal;
    color: #3f8a5f;
    border: 2px solid #3f8a5f;
    border-radius: 8px;
}

.nes-picker-item.current .nes-picker-has-save {
    color: #f8f1d7;
    border-color: #f8f1d7;
}

/* 列表长了小屏也别顶出屏幕 */
.nes-save-dialog.open {
    max-height: 86vh;
    overflow-y: auto;
}

/* ============================================================
 * 按键说明弹窗
 * 骨架照搬 /i 的「网站配置」弹窗（遮罩 + 卡片 + 头部 / 内容 / 底栏，
 * 弹入动效、点外面关、小屏从底部推出都一样），只把配色换成机身这套：
 * 米黄 #f8f1d7 · 深灰 #474f51 · 砖红 #da4a4a · 浅米 #efe6c8。
 * 用 position:fixed 铺满视口，所以由 ui.js 挂到 body 上。
 * ============================================================ */
.nes-helpask {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(20, 24, 26, .5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', Tahoma, Arial, sans-serif;
}

.nes-helpask.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.nes-help-dialog {
    width: 100%;
    max-width: 420px;
    /* 9 行键位表在 700px 出头的窗口里正好放下，不滚（矮窗口才需要滚） */
    max-height: 88vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    background: #f8f1d7;
    border-radius: 18px;
    /* 一层是机身那套"白边实体投影"，一层是浮起来该有的柔影 */
    box-shadow: 6px 6px 0 rgba(255, 255, 255, .8), 0 24px 60px rgba(20, 24, 26, .45);
    opacity: 0;
    transform: translateY(14px) scale(.97);
    transition: opacity .22s ease, transform .26s cubic-bezier(.2, .9, .3, 1.15);
}

.nes-helpask.open .nes-help-dialog {
    opacity: 1;
    transform: none;
}

.nes-help-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 3px solid #e6ddc0;
}

.nes-help-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: #474f51;
}

.nes-help-subtitle {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.5;
    color: #8d8378;
}

.nes-help-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: #efe6c8;
    color: #8d8378;
    cursor: pointer;
    transition: background-color .18s, color .18s;
}

.nes-help-close svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
}

.nes-help-close:hover {
    background: #da4a4a;
    color: #f8f1d7;
}

.nes-help-body {
    padding: 2px 18px 14px;
}

.nes-help-group-title {
    margin: 10px 0 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    color: #a89e9b;
}

.nes-help-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 2px dashed #e6ddc0;
}

.nes-help-group:last-child .nes-help-row:last-child {
    border-bottom: 0;
}

.nes-help-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #474f51;
}

.nes-help-keys {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 键帽：一体机的实体键那味儿（白面 + 深灰描边 + 下方一道立体投影） */
.nes-help-keys kbd {
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    color: #474f51;
    background: #fffef7;
    border: 2px solid #474f51;
    border-radius: 7px;
    box-shadow: 0 2px 0 #474f51;
}

.nes-help-or {
    font-size: 11px;
    font-style: normal;
    color: #a89e9b;
}

.nes-help-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 3px solid #e6ddc0;
}

.nes-help-note {
    font-size: 12px;
    line-height: 1.5;
    color: #8d8378;
}

.nes-help-btn {
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s, color .18s, transform .12s;
}

.nes-help-btn:active {
    transform: scale(.97);
}

.nes-help-btn-primary {
    color: #f8f1d7;
    background: #da4a4a;
    box-shadow: 0 3px 0 rgba(255, 255, 255, .7);
}

.nes-help-btn-primary:hover {
    background: #c93f3f;
}

/* 小屏：从底部推出的面板 */
@media screen and (max-width: 560px) {
    .nes-helpask {
        align-items: flex-end;
        padding: 0;
    }
    .nes-help-dialog {
        max-width: none;
        max-height: 90vh;
        border-radius: 18px 18px 0 0;
        transform: translateY(24px);
    }
    .nes-help-head {
        padding: 18px 16px 13px;
    }
    .nes-help-body {
        padding: 4px 16px 18px;
    }
    .nes-help-foot {
        margin-top: 14px;
    }
    .nes-help-btn {
        flex: 1 1 auto;
    }
}