:root{color-scheme:light;--bg:#edf2f8;--panel:#fff;--panel-soft:#f6f8fc;--text:#182235;--muted:#78869a;--line:#dce4ef;--accent:#3979ef;--accent-2:#7457e8;--screen:#080c12;--shadow:0 18px 55px rgba(32,55,88,.1);--danger:#ef5264}
*{box-sizing:border-box}
html{min-width:0;background:var(--bg)}
body{min-width:0;margin:0;background:radial-gradient(circle at 50% -15%,rgba(75,126,239,.15),transparent 38%),var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif;transition:background-color .2s,color .2s}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit}
a{color:inherit;text-decoration:none}
.site-header{position:sticky;top:0;z-index:20;display:flex;height:68px;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100% - 1280px)/2));border-bottom:1px solid rgba(214,224,237,.88);background:rgba(255,255,255,.87);backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:11px}.brand-mark{display:grid;width:42px;height:42px;place-items:center;border-radius:11px;background:linear-gradient(135deg,#3979ef,#7457e8);box-shadow:0 8px 20px rgba(57,121,239,.24);color:#fff;font-size:17px;font-weight:900;letter-spacing:-1px}.brand strong,.brand small{display:block}.brand strong{font-size:17px;line-height:21px}.brand small{margin-top:1px;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.18em}.header-actions{display:flex;align-items:center;gap:10px}.test-badge{padding:5px 9px;border:1px solid #cbdcfb;border-radius:20px;background:#edf4ff;color:#3972ce;font-size:11px;font-weight:700}.icon-button{display:grid;width:36px;height:36px;padding:0;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer}.icon-button svg{width:18px;fill:currentColor}.home-link{padding:8px 13px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:13px;font-weight:600}
.page-shell{width:min(1280px,calc(100% - 36px));margin:0 auto;padding:34px 0 24px}.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 24px}.eyebrow,.section-kicker{color:#5275b0;font-size:10px;font-weight:800;letter-spacing:.18em}.hero h1{margin:6px 0 8px;font-size:30px;line-height:1.25;letter-spacing:-.04em}.hero p{margin:0;color:var(--muted);font-size:14px;line-height:22px}.hero-status{display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.72);color:var(--muted);font-size:12px;white-space:nowrap}.hero-status span,.power-light,.status-dot{display:block;width:8px;height:8px;border-radius:50%;background:#2fc77b;box-shadow:0 0 0 4px rgba(47,199,123,.12)}
.game-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px;align-items:stretch}.library-panel,.player-panel,.notes-panel{border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:var(--shadow)}.library-panel{position:sticky;top:86px;display:flex;flex-direction:column;padding:18px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.panel-heading h2{margin:3px 0 0;font-size:20px}.game-count{padding:4px 8px;border-radius:7px;background:var(--panel-soft);color:var(--muted);font-size:11px}.library-search{display:flex;height:38px;align-items:center;gap:8px;margin-bottom:9px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel-soft)}.library-search:focus-within{border-color:#8fb3ec;box-shadow:0 0 0 3px rgba(57,121,239,.1)}.library-search svg{width:17px;flex:0 0 auto;fill:#8090a6}.library-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:12px}.library-search input::placeholder{color:#a1abba}.category-tabs{display:flex;gap:6px;margin:0 0 10px;padding-bottom:3px;overflow-x:auto;scrollbar-width:none}.category-tabs::-webkit-scrollbar{display:none}.category-tabs button{flex:0 0 auto;height:27px;padding:0 9px;border:1px solid var(--line);border-radius:14px;background:var(--panel-soft);color:var(--muted);font-size:10px;cursor:pointer}.category-tabs button.is-active{border-color:#3979ef;background:#3979ef;color:#fff;font-weight:700}.game-list{display:grid;min-height:300px;flex:1;contain:size;gap:9px;padding-right:4px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#b7c5d8 transparent}.game-list::-webkit-scrollbar{width:5px}.game-list::-webkit-scrollbar-thumb{border-radius:6px;background:#b7c5d8}.game-card{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);gap:11px;width:100%;min-height:82px;padding:9px;border:1px solid var(--line);border-radius:13px;background:var(--panel-soft);text-align:left;cursor:pointer;transition:border-color .2s,background-color .2s,transform .2s}.game-card[hidden]{display:none}.game-card:hover{border-color:#b9cdef;transform:translateY(-1px)}.game-card.is-selected{border-color:#8eb3f2;background:#f0f5ff}.pixel-cover{position:relative;display:grid;width:62px;height:62px;place-items:center;overflow:hidden;border-radius:10px;background:#171d29;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.cover-croom{grid-template-columns:repeat(2,13px);grid-template-rows:repeat(2,13px);gap:5px;background:linear-gradient(135deg,#293750,#151b27)}.cover-croom i{display:block;width:13px;height:13px;border:3px solid #ffcf59;border-radius:2px}.cover-croom i:nth-child(2),.cover-croom i:nth-child(3){border-color:#62d7d0}.cover-rfk{display:flex;gap:11px;background:linear-gradient(135deg,#523a79,#1b2130);color:#fff;font:900 21px/1 monospace}.cover-rfk b:last-child{color:#ffce55}.cover-library{display:flex;flex-direction:column;gap:2px;background:linear-gradient(145deg,#265b8f,#263149);color:#d9eaff;font-family:monospace;font-weight:900}.cover-library b:first-child{font-size:19px;line-height:20px}.cover-library b:last-child{color:#74d6c7;font-size:9px;letter-spacing:.12em}.game-copy{min-width:0;align-self:center}.game-copy strong,.game-copy small,.game-copy em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-copy strong{font-size:14px;line-height:20px}.game-copy small{margin-top:1px;color:#5f6f85;font-size:11px;line-height:17px}.game-copy em{margin-top:3px;color:#95a0ae;font-size:10px;font-style:normal}.select-mark{position:absolute;right:8px;top:7px;color:#3979ef;font-size:9px;font-weight:700}.library-empty{padding:24px 8px;color:var(--muted);font-size:12px;text-align:center}.local-rom-button{display:flex;align-items:center;gap:10px;margin-top:11px;padding:11px;border:1px dashed #b9c8dc;border-radius:12px;color:#52647c;cursor:pointer}.local-rom-button:hover{border-color:#6f9be4;background:#f4f8ff}.local-rom-button svg{width:22px;flex:0 0 auto;fill:#4f7dcc}.local-rom-button span{min-width:0}.local-rom-button strong,.local-rom-button small{display:block}.local-rom-button strong{font-size:13px}.local-rom-button small{margin-top:2px;color:#96a0ad;font-size:10px}.local-rom-button input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.keyboard-help{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}.keyboard-help>strong{grid-column:1/-1;margin-bottom:1px;color:var(--text);font-size:12px}.keyboard-help>div{display:flex;min-width:0;align-items:center;gap:7px;padding:6px 8px;border-radius:8px;background:var(--panel-soft)}.keyboard-help>div span{margin-right:auto;white-space:nowrap}.keyboard-help kbd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}kbd{min-width:24px;padding:3px 5px;border:1px solid #cad4e1;border-bottom-width:2px;border-radius:5px;background:var(--panel-soft);color:#536177;font:600 10px/1.2 monospace;text-align:center}
.player-panel{min-width:0;padding:17px}.player-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.player-topbar>div{display:flex;align-items:center;gap:8px;min-width:0}.player-topbar span:not(.power-light){color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.12em}.player-topbar strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.fps-label{padding:4px 7px;border-radius:6px;background:var(--panel-soft);letter-spacing:0!important}.screen-frame{display:grid;place-items:center;padding:14px;border-radius:16px;background:linear-gradient(145deg,#293241,#171d27);box-shadow:inset 0 1px 1px rgba(255,255,255,.12),inset 0 -1px 1px rgba(0,0,0,.4)}.screen-bezel{position:relative;width:min(100%,720px);aspect-ratio:256/240;overflow:hidden;border:2px solid #3b4555;border-radius:10px;background:var(--screen);box-shadow:0 0 0 5px #0d121a,0 12px 34px rgba(0,0,0,.28)}.nes-screen{position:absolute;inset:0;display:grid;width:100%;height:100%;place-items:center}.nes-screen canvas{display:block;max-width:100%;max-height:100%;image-rendering:pixelated}.screen-placeholder{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle at center,rgba(44,61,84,.48),rgba(6,9,14,.96));color:#dfe7f4;text-align:center}.screen-placeholder.is-hidden{display:none}.screen-placeholder strong{margin-top:15px;font-size:18px}.screen-placeholder small{margin-top:5px;color:#8f9bad;font-size:12px}.pixel-controller{position:relative;width:76px;height:32px;border:3px solid #6f7f96;border-radius:8px}.pixel-controller:before{content:"";position:absolute;left:12px;top:6px;width:17px;height:17px;background:linear-gradient(#6f7f96 0 0) 50%/5px 100% no-repeat,linear-gradient(#6f7f96 0 0) 50%/100% 5px no-repeat}.pixel-controller:after{content:"●  ●";position:absolute;right:7px;top:4px;color:#ef6579;font-size:14px;letter-spacing:4px}.start-overlay{margin-top:16px;padding:9px 18px;border:0;border-radius:9px;background:linear-gradient(135deg,#3979ef,#6658df);color:#fff;font-size:13px;font-weight:700;cursor:pointer}.player-status{display:flex;align-items:center;gap:8px;min-height:31px;padding:9px 3px 0;color:var(--muted);font-size:12px}.status-dot{width:6px;height:6px;box-shadow:none}.status-dot.is-busy{background:#f0a43a}.status-dot.is-error{background:var(--danger)}.toolbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-top:8px}.toolbar button{display:flex;min-width:0;height:40px;align-items:center;justify-content:center;gap:6px;padding:0 8px;border:1px solid var(--line);border-radius:9px;background:var(--panel-soft);font-size:12px;font-weight:650;cursor:pointer}.toolbar button:hover:not(:disabled){border-color:#aec5e9;background:#f1f6ff}.toolbar button.primary-tool{border-color:#3979ef;background:#3979ef;color:#fff}.toolbar button:disabled{opacity:.45;cursor:not-allowed}.toolbar button span{font-size:14px}.toolbar button b{font-weight:650}
.touch-controller{display:none;grid-template-columns:132px minmax(120px,1fr) 148px;align-items:center;gap:18px;width:min(100%,650px);margin:20px auto 2px;padding:16px 22px;border:1px solid var(--line);border-radius:18px;background:var(--panel-soft);touch-action:none;user-select:none}.touch-controller[hidden]{display:none!important}.dpad{display:grid;grid-template-columns:42px 42px 42px;grid-template-rows:42px 42px 42px}.dpad button,.dpad span{border:0;background:#283343;color:#dce4ee}.dpad button{cursor:pointer}.dpad-up{grid-column:2}.dpad-left{grid-column:1;grid-row:2}.dpad span{grid-column:2;grid-row:2}.dpad-right{grid-column:3;grid-row:2}.dpad-down{grid-column:2;grid-row:3}.dpad-up{border-radius:7px 7px 0 0!important}.dpad-left{border-radius:7px 0 0 7px!important}.dpad-right{border-radius:0 7px 7px 0!important}.dpad-down{border-radius:0 0 7px 7px!important}.center-buttons{display:flex;align-items:center;justify-content:center;gap:12px}.center-buttons button{width:57px;height:22px;border:0;border-radius:12px;background:#8d99aa;color:#fff;font-size:8px;font-weight:800;letter-spacing:.08em;transform:rotate(-8deg);cursor:pointer}.action-buttons{display:flex;justify-content:flex-end;gap:13px;transform:rotate(-8deg)}.action-buttons button{display:grid;width:58px;height:58px;padding:0;place-items:center;border:6px solid #dfe4ec;border-radius:50%;background:#c64258;box-shadow:0 3px 0 #8e2c3d;color:#fff;font-size:17px;font-weight:900;cursor:pointer}.action-buttons .button-b{margin-top:18px}.touch-controller button.is-pressed{filter:brightness(.78);transform:translateY(2px)}.center-buttons button.is-pressed{transform:rotate(-8deg) translateY(2px)}.action-buttons button.is-pressed{transform:translateY(3px)}
.notes-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:18px;padding:17px 20px}.notes-panel>div{padding:0 20px;border-right:1px solid var(--line)}.notes-panel>div:first-child{padding-left:0}.notes-panel>div:last-child{padding-right:0;border:0}.notes-panel strong,.notes-panel span{display:block}.notes-panel strong{font-size:13px}.notes-panel span{margin-top:4px;color:var(--muted);font-size:11px;line-height:18px}footer{display:flex;width:min(1280px,calc(100% - 36px));align-items:center;justify-content:space-between;margin:0 auto;padding:9px 0 28px;color:#8a96a6;font-size:11px}footer a:hover{color:#3979ef}
html[data-theme="dark"]{color-scheme:dark;--bg:#171a1f;--panel:#24282e;--panel-soft:#2b3037;--text:#e8edf5;--muted:#9ba6b6;--line:#38414d;--screen:#05070a;--shadow:none}html[data-theme="dark"] body{background:radial-gradient(circle at 50% -15%,rgba(61,102,180,.15),transparent 38%),var(--bg)}html[data-theme="dark"] .site-header{border-color:#303843;background:rgba(24,28,34,.9)}html[data-theme="dark"] .test-badge{border-color:#425a80;background:#29384f;color:#8fb7f2}html[data-theme="dark"] .hero-status{background:rgba(36,40,46,.72)}html[data-theme="dark"] .game-card.is-selected{border-color:#557ab5;background:#293549}html[data-theme="dark"] .local-rom-button:hover{background:#293549}html[data-theme="dark"] kbd{border-color:#485361}html[data-theme="dark"] .action-buttons button{border-color:#444c58}
@media (max-width:900px){.site-header{height:62px;padding:0 14px}.brand-mark{width:38px;height:38px}.brand strong{font-size:15px}.home-link{display:none}.page-shell{width:min(100% - 20px,720px);padding:23px 0 18px}.hero{align-items:flex-start;margin-bottom:17px}.hero h1{font-size:24px}.hero p{font-size:13px}.hero-status{display:none}.game-layout{grid-template-columns:1fr}.player-panel{grid-row:1;padding:11px}.library-panel{position:static;grid-row:2}.screen-frame{padding:10px}.toolbar{grid-template-columns:repeat(3,1fr)}.touch-controller{grid-template-columns:112px minmax(100px,1fr) 124px;gap:8px;padding:13px}.dpad{grid-template-columns:36px 36px 36px;grid-template-rows:36px 36px 36px}.action-buttons{gap:7px}.action-buttons button{width:50px;height:50px;border-width:5px}.center-buttons{gap:7px}.center-buttons button{width:49px}.notes-panel{grid-template-columns:1fr;padding:5px 15px}.notes-panel>div,.notes-panel>div:first-child,.notes-panel>div:last-child{padding:11px 0;border-right:0;border-bottom:1px solid var(--line)}.notes-panel>div:last-child{border-bottom:0}footer{width:calc(100% - 24px);flex-direction:column;gap:6px;padding-bottom:20px}}
@media (max-width:900px) and (any-pointer:coarse){.touch-controller:not([hidden]){display:grid}}
@media (max-width:520px){.header-actions{gap:7px}.test-badge{display:none}.hero h1{font-size:21px}.hero p{line-height:20px}.player-topbar span:not(.power-light){display:none}.screen-frame{padding:8px}.screen-bezel{border-radius:7px}.toolbar{gap:6px}.toolbar button{height:38px;font-size:11px}.touch-controller{grid-template-columns:104px 1fr 107px;padding:12px 8px}.dpad{grid-template-columns:34px 34px 34px;grid-template-rows:34px 34px 34px}.action-buttons button{width:47px;height:47px}.center-buttons{flex-direction:column}.center-buttons button{height:19px}.library-panel{padding:14px}.keyboard-help{display:none}.game-card{grid-template-columns:56px minmax(0,1fr)}.pixel-cover{width:56px;height:56px}.notes-panel{margin-top:12px}}
@media (max-width:360px){.touch-controller{grid-template-columns:96px 1fr 96px}.dpad{grid-template-columns:32px 32px 32px;grid-template-rows:32px 32px 32px}.action-buttons button{width:43px;height:43px}.action-buttons{gap:4px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* 大型 ROM 库统一使用精简纯文字列表 */
.library-panel{min-width:0}.category-tabs{max-width:100%;overscroll-behavior-x:contain;scroll-behavior:smooth;touch-action:pan-y;-webkit-overflow-scrolling:touch;user-select:none;cursor:grab}.category-tabs.is-dragging{scroll-behavior:auto;cursor:grabbing}.game-list{gap:5px}.game-card{display:block;min-height:41px;padding:9px 11px;border-radius:9px}.game-card .game-copy strong{font-size:13px;line-height:21px}.game-card:hover{transform:none}
@media (max-width:520px){.game-card{min-height:40px;padding:8px 10px}}

/* 双人键盘与手柄设置 */
.toolbar{grid-template-columns:repeat(8,minmax(0,1fr))}.toolbar button{gap:5px;padding:0 5px;font-size:11px}
.settings-modal{position:fixed;inset:0;z-index:100;display:grid;padding:18px;place-items:center;background:rgba(8,12,18,.68);backdrop-filter:blur(5px)}.settings-modal[hidden]{display:none}.settings-dialog{width:min(650px,100%);max-height:min(760px,calc(100vh - 36px));overflow:hidden;border:1px solid var(--line);border-radius:17px;background:var(--panel);box-shadow:0 24px 80px rgba(0,0,0,.3)}.settings-dialog>header{display:flex;align-items:center;justify-content:space-between;padding:17px 19px;border-bottom:1px solid var(--line)}.settings-dialog>header span{color:#5b7eb5;font-size:9px;font-weight:800;letter-spacing:.16em}.settings-dialog h2{margin:2px 0 0;font-size:20px}.settings-dialog>header button{width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--panel-soft);font-size:23px;line-height:1;cursor:pointer}.settings-help{margin:0;padding:13px 19px 0;color:var(--muted);font-size:12px;line-height:19px}.binding-prompt,.gamepad-devices{margin:11px 19px 0;padding:9px 11px;border-radius:9px;background:#edf4ff;color:#3f6fac;font-size:12px}.binding-prompt{border:1px solid #bfd3f3;text-align:center}.gamepad-devices{background:var(--panel-soft);color:var(--muted)}.mapping-scroll{max-height:460px;margin:13px 19px 0;overflow:auto;border:1px solid var(--line);border-radius:11px}.mapping-table{width:100%;border-collapse:collapse;table-layout:fixed}.mapping-table th,.mapping-table td{height:48px;padding:7px 10px;border-bottom:1px solid var(--line);font-size:12px;text-align:center}.mapping-table tr:last-child td{border-bottom:0}.mapping-table th{position:sticky;top:0;z-index:1;background:var(--panel-soft);color:var(--muted);font-size:11px}.mapping-table th:first-child,.mapping-table td:first-child{width:26%;text-align:left}.mapping-button{width:100%;min-height:32px;padding:4px 7px;border:1px solid var(--line);border-radius:7px;background:var(--panel-soft);font-size:11px;cursor:pointer}.mapping-button:hover,.mapping-button.is-listening{border-color:#6d9ce6;background:#edf4ff;color:#2f6fcf}.settings-dialog>footer{display:flex;width:auto;align-items:center;justify-content:flex-end;gap:8px;margin:0;padding:14px 19px;color:inherit;font-size:inherit}.settings-dialog>footer button{height:35px;padding:0 13px;border:1px solid var(--line);border-radius:8px;background:var(--panel-soft);font-size:12px;cursor:pointer}.settings-dialog>footer .settings-done{border-color:#3979ef;background:#3979ef;color:#fff}html[data-theme="dark"] .binding-prompt{border-color:#47658d;background:#29384f;color:#a9c9f2}html[data-theme="dark"] .mapping-button.is-listening{background:#29384f;color:#a9c9f2}
@media (max-width:900px){.toolbar{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.settings-modal{padding:8px}.settings-dialog{max-height:calc(100vh - 16px);border-radius:14px}.settings-dialog>header{padding:13px 14px}.settings-dialog h2{font-size:17px}.settings-help{padding:10px 14px 0}.binding-prompt,.gamepad-devices{margin:9px 14px 0}.mapping-scroll{margin:10px 14px 0}.mapping-table th,.mapping-table td{height:44px;padding:6px}.settings-dialog>footer{padding:11px 14px}}

@media (min-width:901px) and (max-width:1200px){.keyboard-help{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.game-layout{align-items:start}.library-panel{height:auto}.game-list{min-height:0;max-height:505px;flex:0 1 505px;contain:none}.keyboard-help{grid-template-columns:repeat(2,minmax(0,1fr))}}