html, body { touch-action: pan-x pan-y; }
.emulator-app .nes-screen { touch-action: none; }
.emulator-app[data-video-fit="fill"] .nes-screen { object-fit: fill !important; }
.emulator-app[data-video-fit="contain"] .nes-screen { object-fit: contain !important; }

/* Rotated phones share the game's coordinate surface. */
.menu-sheet { z-index: 30; transition: visibility 0s linear .32s; }
.menu-sheet.is-open { transition-delay: 0s; }
.menu-sheet .menu-backdrop { background: rgb(5 7 12 / 22%); backdrop-filter: none; -webkit-backdrop-filter: none; transition: opacity .32s; }
.menu-sheet .menu-panel,
.emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]) ~ .menu-sheet .menu-panel {
  --sheet-line: rgb(219 211 236 / 22%);
  position: absolute; inset: auto 0 0; margin-inline: auto;
  width: min(580px,calc(100% - 24px)) !important; height: min(94%,920px); max-height: min(94%,920px) !important;
  display: flex; flex-direction: column; padding: 0;
  border: 1px solid rgb(231 223 231 / 24%); border-bottom: 0;
  border-radius: 30px 30px 0 0 !important;
  color: #f7eddf !important; background: linear-gradient(135deg,rgb(49 43 39 / 72%),rgb(24 24 32 / 78%)) !important;
  backdrop-filter: blur(28px) saturate(125%); -webkit-backdrop-filter: blur(28px) saturate(125%);
  box-shadow: 0 -8px 46px rgb(0 0 0 / 28%), inset 0 1px rgb(255 255 255 / 9%);
  transform: translateY(105%); transition: transform .32s cubic-bezier(.22,.8,.25,1);
}
.menu-sheet.is-open .menu-panel,
.emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]) ~ .menu-sheet.is-open .menu-panel { transform: translateY(0); }
.menu-sheet .menu-tabs { display: none !important; }
.menu-sheet .menu-handle { flex: 0 0 26px; align-self: center; display: grid; place-items: center; width: 96px; height: 26px; min-height: 26px !important; padding: 0 !important; border: 0 !important; background: transparent !important; touch-action: none; }
.menu-handle span { width: 48px; height: 6px; border-radius: 6px; background: rgb(211 202 214 / 40%); }
.menu-sheet .menu-header { flex: 0 0 auto; position: relative; display: flex; justify-content: center; height: auto; min-height: 80px; padding: 8px 48px 16px; margin: 0; border: 0; background: transparent !important; text-align: center; }
.menu-header h1 { margin: 0; color: #f6d687; font-size: 24px; line-height: 1.3; letter-spacing: 0; }
.menu-panel[data-view="home"] .menu-header h1::before,
.menu-panel[data-view="home"] .menu-header h1::after { content: "✣"; display: inline-block; margin-inline: 14px; color: #bb9453; font-size: 19px; }
.menu-header .menu-subtitle { margin: 7px 0 0; color: #bdb6ca; font: 14px/1.4 sans-serif; letter-spacing: 0; text-transform: none; }
.menu-header .close-button { position: absolute; top: 9px; right: 12px; width: 32px; height: 32px; min-width: 32px; min-height: 32px; border: 0; border-radius: 50%; color: #c7bfca; background: rgb(255 255 255 / 5%); font-size: 24px; }
.menu-header [data-menu-back] { right: auto; left: 12px; }
.menu-header [hidden], .menu-sheet .menu-utilities[hidden], .menu-sheet #exit-game-button[hidden] { display: none !important; }
.menu-sheet .menu-grid { flex: 1 1 0; min-height: 0; display:block; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 0 14px 20px; scroll-padding-block:16px; background: transparent; scrollbar-width: thin; scrollbar-color: #77707a transparent; }
.menu-sheet .menu-grid { touch-action:pan-y; -webkit-overflow-scrolling:touch; }
@media (orientation:portrait) {
  .emulator-app:is([data-force-rotation="true"],[data-layout-mode="rotated"]) ~ .menu-sheet .menu-grid { touch-action:none; }
}
.menu-pane[data-motion="forward"] { animation: menu-view-forward .28s cubic-bezier(.22,.8,.25,1) both; }
.menu-pane[data-motion="back"] { animation: menu-view-back .28s cubic-bezier(.22,.8,.25,1) both; }
@keyframes menu-view-forward { from { opacity:0; transform:translateX(42px); } to { opacity:1; transform:translateX(0); } }
@keyframes menu-view-back { from { opacity:0; transform:translateX(-42px); } to { opacity:1; transform:translateX(0); } }
.menu-panel:not([data-view="home"]) .menu-pane { min-height: 120px; }
.menu-overview { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.menu-overview[hidden] { display: none; }
.menu-sheet .menu-grid .menu-overview button[data-menu-action] {
  display: grid; grid-template-columns: 44px minmax(0,1fr) 12px; align-items: center; gap: 12px;
  min-height: 84px; padding: 12px; border: 1px solid rgb(161 157 193 / 38%); border-radius: 16px;
  background: linear-gradient(135deg,rgb(67 67 87 / 67%),rgb(40 41 55 / 72%)); color: #f9f4ec;
  box-shadow: inset 0 1px 7px rgb(230 223 255 / 10%), 0 3px 10px rgb(0 0 0 / 12%);
  text-align: left; font-size: 17px; font-weight: 500;
}
.menu-overview button > :is(.asset-icon,svg:first-child) { width: 44px; height: 44px; filter: drop-shadow(0 3px 2px rgb(0 0 0 / 30%)); }
.menu-overview button > svg:last-child { width: 12px; height: 18px; color: #c8c1cd; }
.menu-command-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.menu-command-copy strong { font-size: 17px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.menu-command-copy small { color: #b9b1bf; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.menu-sheet .menu-grid .menu-overview button[data-menu-action="resume"] { border-color: #e9bd4f; background: linear-gradient(135deg,rgb(116 83 34 / 72%),rgb(85 57 28 / 76%)); box-shadow: inset 0 0 12px #edb75d33,0 0 0 1px #d3a84333; }
[data-menu-action="resume"] > svg, [data-menu-action="cheats"] > svg { color: #ffcf4e; fill: #eab437; }
[data-menu-action="display"] > svg:first-child, [data-menu-action="audio"] > svg:first-child { color: #75e9b2; }
[data-menu-action="capture"] > svg:first-child { color: #e5e7ef; }
.menu-sheet .menu-grid .menu-overview button[data-menu-action="exit"] { border-color: #954f63; background: linear-gradient(135deg,rgb(95 44 61 / 75%),rgb(64 32 43 / 77%)); color: #f3b7bf; }
[data-menu-action="exit"] > svg:first-child { color: #ff626a; }
.menu-sheet .menu-overview button:hover { filter: brightness(1.12); }
.menu-sheet .menu-overview button:active { filter: brightness(.93); }
.menu-sheet :is(button,a,input,select,textarea,summary):focus-visible { outline: 2px solid #f2cf82; outline-offset: 3px; }
.menu-sheet .menu-utilities { flex: 0 0 auto; display: grid; grid-template-columns: 1fr; gap: 0; padding: 12px 0 max(12px,env(safe-area-inset-bottom)); margin: 0 24px; border-top: 1px solid var(--sheet-line); background: transparent !important; }
.menu-sheet .menu-panel .menu-utilities button[data-menu-utility] { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 0 3px; border: 0; border-radius: 0; background: transparent; color: #cbc1d0; font-size: 12px; box-shadow:none; }
.menu-sheet .menu-panel .menu-utilities button[data-menu-utility="exit"] { flex-direction:row; justify-content:center; min-height:48px; padding:8px 16px; gap:10px; color:#ffe2e4; border:1px solid #e6758177; border-radius:10px; background:linear-gradient(135deg,#a9344799,#64222dcc); box-shadow:inset 0 1px 4px #ffffff14; }
.menu-utilities button + button { border-left: 1px solid var(--sheet-line) !important; }
.menu-utilities :is(svg,.asset-icon) { width: 32px; height: 32px; padding: 9px; box-sizing: content-box; border: 1px solid #a9a0b670; border-radius: 50%; background: #aaa0b210; }
.menu-utilities .asset-icon { object-fit: contain; }
.menu-sheet .menu-panel .menu-utilities button[data-menu-utility="exit"] svg { width:22px; height:22px; padding:0; border:0; border-radius:0; background:transparent; }
.menu-sheet .menu-card { color: #f1eadc; border-bottom-color: var(--sheet-line); gap: 16px; }
.menu-sheet :is(.menu-label,.menu-card > span,.range-field,.haptic-field,.layout-tuning summary,.api-loader label,.api-loader > span) { color: #c7becb; font-size: 14px; line-height: 1.5; }
.menu-sheet :is(.wide-action,.menu-action,.slot-actions button,.card-actions label,.footer-action) { min-height: 44px; border-radius: 10px; }
.menu-sheet :is(button:not(.close-button):not([data-save-slot]):not([data-menu-action]):not(.menu-handle):not([data-menu-utility]),input:not([type="range"]):not([type="checkbox"]),select,textarea) { border-color: #93879d66; background: #46405170; color: #f0e7ee; font-size: 14px; border-radius: 10px; }
.menu-sheet :is(button.is-active,button.primary,.menu-action.primary,label.primary):not([data-menu-action]) { background: #8c692c8c; border-color: #d2ad60; color: #ffe2a0; }
.menu-sheet :is(.choice-row,.layout-mode-options) { flex-wrap: wrap; border: 0; gap: 8px; }
.menu-sheet .choice-row button { min-width: 60px; min-height: 44px; }
.menu-sheet input[type="range"] { accent-color: #e5ba67; }
.menu-sheet input[type="checkbox"] { accent-color: #e5ba67; width: 18px; height: 18px; }
.menu-sheet .range-field output { color: #f3d89e; }
.menu-sheet .room-settings :is(input,label) { font-size: 16px; }
.menu-sheet .room-settings input { min-height: 44px; }
.menu-sheet .room-invite-qr { display:flex; flex-direction:column; align-items:center; gap:12px; margin:0; padding:12px 0; }
.menu-sheet .room-invite-qr[hidden], .menu-sheet .room-invite-qr [hidden] { display:none !important; }
.room-invite-qr img { display:block; width:min(224px,100%); height:auto; aspect-ratio:1; background:#fff; image-rendering:pixelated; border:0; border-radius:4px; object-fit:contain; }
.room-invite-qr figcaption { max-width:100%; color:#d4e6dc; font-size:14px; line-height:1.5; text-align:center; overflow-wrap:anywhere; }
.room-invite-qr button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 14px; }
.room-invite-qr button svg { width:18px; height:18px; }
.menu-sheet[data-orientation="landscape"] .room-invite-qr img { width:min(168px,100%); }
.menu-sheet[data-orientation="landscape"] .room-invite-qr { gap:8px; padding:4px 0; }
.menu-sheet .cheat-form { flex-wrap: wrap; }
.menu-sheet .cheat-form :is(input,textarea) { flex: 1 1 100%; min-width: 0; padding: 10px; }
.menu-sheet .cheat-form button { min-height: 44px; }
.menu-sheet .cheat-row { color: #e8dae4; border-color: var(--sheet-line); }
.menu-sheet .save-slots button[data-save-slot] { border-color: #82758c80; background: #24212f66; color: #d1c1d4; }
.menu-sheet .save-slots button.is-selected { border-color: #e0b461; background: #8d713e30; }
.menu-sheet .save-slots button.is-selected b { background: #b6883f; }
.slot-shortcuts { display: flex; gap: 4px; }
.menu-sheet .save-slots .slot-shortcuts button[data-write-slot],.menu-sheet .save-slots .slot-shortcuts button[data-read-slot] { position:static; display:flex; flex-direction:row; width:auto; flex:1; aspect-ratio:auto; height:40px; min-height:40px; padding:5px 2px; gap:3px; border:1px solid #93879d66; border-radius:8px; background:#46405170; color:#f7e5c5; font-size:12px; margin:0; }
.cloud-controls { padding: 16px 0; border-top: 1px solid var(--sheet-line); }
.cloud-controls > div { display:flex; flex-wrap:wrap; gap:8px; }
.cloud-controls button { min-height:44px; padding:8px 12px; }
.cloud-controls p,.cloud-slot-state { font-size:13px; color:#c7becb; line-height:1.6; }
.menu-sheet .account-dialog { background:#fff9ed; }
.connection-progress { position:absolute; z-index:35; inset:0; display:grid; place-items:center; background:#121418b5; backdrop-filter:blur(8px); }
.connection-progress > div { max-width:min(380px,calc(100% - 32px)); padding:28px; text-align:center; background:#292731; border:1px solid #776650; border-radius:8px; color:#f9e6bf; }
.connection-progress button { min-height:44px; padding:8px 18px; color:#f4ead9; background:#3f3940; border:1px solid #786e70; border-radius:6px; }
.connection-progress .pixel-loader { display:inline-block; }
#host-room-invite { width:min(360px,calc(100% - 28px)); max-height:calc(100dvh - 28px); padding:24px; border:1px solid #b8cfc599; border-radius:8px; color:#ecf5ed; background:#273b32ee; box-shadow:0 18px 70px #0007; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); text-align:center; touch-action:pan-x pan-y; }
#host-room-invite::backdrop { background:#09151088; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
#host-invite-title { margin:0 0 16px; font-size:18px; line-height:1.4; }
#host-invite-image { width:200px; max-width:100%; height:auto; aspect-ratio:1; background:#fff; border-radius:4px; image-rendering:pixelated; }
#host-invite-image[hidden] { display:none; }
#host-invite-status { margin:14px 0; font-size:13px; line-height:1.5; }
#host-room-invite button { width:100%; min-height:44px; padding:8px 12px; border:1px solid #a8c3b6; border-radius:6px; color:#eff8f2; background:#466655; font:14px sans-serif; }
@media (orientation:landscape) { #host-room-invite { padding:16px; } #host-invite-image { width:152px; } }
@media (orientation:portrait) {
  .emulator-app:is([data-force-rotation="true"],[data-layout-mode="rotated"]) ~ #host-room-invite { width:min(360px,calc(100dvh - 28px)); max-width:none; max-height:calc(100dvw - 28px); padding:16px; transform:rotate(90deg); }
  .emulator-app:is([data-force-rotation="true"],[data-layout-mode="rotated"]) ~ #host-room-invite #host-invite-image { width:152px; }
}
.game-notice .notice-panel { border-color:#a797b866; border-radius:20px; background:#28232dcc; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); color:#f5e9de; }
.game-notice .notice-panel h2 { color:#f2d18c; }
.game-notice .notice-panel button { min-height:44px; border-color:#c4a05b; border-radius:10px; background:#86653688; color:#ffe2aa; }
.game-notice .notice-panel .notice-cancel { border-color:#93879d66; background:#46405170; color:#e6dbe8; }
@media (max-width:420px) {
  .menu-sheet .menu-grid { padding-inline:10px; padding-bottom:16px; }
  .menu-overview { gap:10px; }
  .menu-sheet .menu-grid .menu-overview button[data-menu-action] { min-height:76px; grid-template-columns:30px minmax(0,1fr) 9px; gap:8px; padding:10px 8px; border-radius:14px; }
  .menu-overview button > :is(.asset-icon,svg:first-child) { width:30px; height:34px; }
  .menu-command-copy strong { font-size:15px; }
  .menu-command-copy small { font-size:11px; }
  .menu-sheet .menu-utilities { margin-inline:16px; }
  .menu-utilities :is(svg,.asset-icon) { width:26px; height:26px; padding:8px; }
}
@media (max-width:360px) {
  .menu-sheet .menu-grid .menu-overview button[data-menu-action] { grid-template-columns:24px minmax(0,1fr) 8px; gap:6px; }
  .menu-overview button > :is(.asset-icon,svg:first-child) { width:24px; height:30px; }
  .menu-command-copy strong { font-size:14px; }
}
.menu-sheet[data-orientation="landscape"] .menu-panel,
.emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]) ~ .menu-sheet[data-orientation="landscape"] .menu-panel {
  --landscape-command-width:357.4px;
  inset:0 0 0 auto; margin:0; width:min(calc(var(--landscape-command-width) + 21px),calc(100% - 16px)) !important; height:100%; max-height:100% !important;
  border:1px solid rgb(231 223 231 / 24%); border-right:0; border-radius:20px 0 0 20px !important;
  transform:translateX(105%);
}
.menu-sheet[data-orientation="landscape"].is-open .menu-panel,
.emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]) ~ .menu-sheet[data-orientation="landscape"].is-open .menu-panel { transform:translateX(0); }
.menu-sheet[data-orientation="landscape"] .menu-handle { display:none; }
.menu-sheet[data-orientation="landscape"] .menu-header { min-height:54px; padding:14px 38px; }
.menu-sheet[data-orientation="landscape"] .menu-header h1 { font-size:18px; }
.menu-sheet[data-orientation="landscape"] .menu-header h1::before,
.menu-sheet[data-orientation="landscape"] .menu-header h1::after { display:none; }
.menu-sheet[data-orientation="landscape"] .menu-subtitle { display:none; }
.menu-sheet[data-orientation="landscape"] .menu-grid { padding:0 10px 10px; }
.menu-sheet[data-orientation="landscape"] .menu-overview { grid-template-columns:minmax(0,1fr); gap:4px; }
.menu-sheet[data-orientation="landscape"] .menu-grid .menu-overview button[data-menu-action] { min-height:var(--menu-row-height,40px); height:var(--menu-row-height,40px); padding:4px 10px; grid-template-columns:24px minmax(0,1fr) 12px; gap:10px; border-radius:8px; }
.menu-sheet[data-orientation="landscape"] .menu-overview button > :is(.asset-icon,svg:first-child) { width:24px; height:24px; }
.menu-sheet[data-orientation="landscape"] .menu-command-copy strong { font-size:14px; line-height:1.35; }
.menu-sheet[data-orientation="landscape"] .menu-command-copy small { display:none; }
.menu-sheet[data-orientation="landscape"] .menu-utilities { padding:6px 0; margin:0 10px; }
.menu-sheet[data-orientation="landscape"] .menu-panel .menu-utilities button[data-menu-utility] { flex-direction:row; justify-content:center; min-height:44px; gap:8px; }
.menu-sheet[data-orientation="landscape"] .menu-utilities :is(svg,.asset-icon) { width:18px; height:18px; padding:0; border:0; border-radius:0; background:transparent; }
.toast { z-index:60; visibility:visible; pointer-events:none; font-size:14px; border-color:#c9b48666; border-radius:12px; background:#29252cdd; color:#fff1d6; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.toast-layer { position:fixed; z-index:60; inset:0; pointer-events:none; }
.toast-layer .toast { position:absolute; left:50%; top:50%; bottom:auto; width:max-content; max-width:calc(100% - 32px); text-align:center; transform:translate(-50%,-50%); transition:opacity .18s ease; }
.toast-layer .toast.is-visible { transform:translate(-50%,-50%); }
/* The ready hint already explains the next action; a centered load toast
   must not cover it. Error dialogs remain visible above the game. */
body:has(.game-activation:not([hidden])) .toast-layer .toast { visibility:hidden; }
@media (orientation:portrait) {
  .emulator-app:is([data-force-rotation="true"],[data-layout-mode="rotated"]) ~ .toast-layer { right:auto; bottom:auto; width:100dvh; height:100dvw; transform:translateX(100dvw) rotate(90deg); transform-origin:top left; }
}
#quick-toggle { display:grid; place-items:center; }
#quick-toggle svg { width:20px; height:20px; }
@media (prefers-reduced-motion:reduce) {
  .menu-sheet,.menu-sheet .menu-panel,.menu-sheet .menu-backdrop { transition:none; }
  .menu-pane[data-motion] { animation:none; }
}
.emulator-app, .emulator-app *, .menu-sheet, .menu-sheet * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.menu-sheet :is(input,textarea,select), .wechat-qr { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
.save-account { width:100%; padding:0 0 14px; border-bottom:1px solid #77707a70; }
.save-account > div { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.save-account svg { width:22px; height:22px; color:#7ce9ac; flex:none; }
.save-account strong { font-size:14px; }
.save-account button { margin-left:auto; padding:8px 12px; min-height:40px; }
.save-account p { color:#c1b8c8; font-size:12px; line-height:1.6; margin:12px 0 0; }

.cheat-cloud-row{display:flex;align-items:center;justify-content:space-between;gap:12px}#disable-all-cheats{flex:none;min-height:36px;padding:6px 12px;font-size:12px}.named-cheat{width:100%}.named-cheat label{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px}.named-cheat strong{font-size:14px;font-weight:500}.named-cheat input{flex:none}
.menu-sheet .cheat-cloud-row { display:flex; width:100%; gap:12px; }
.menu-sheet #cheat-cloud-state { flex:1; min-width:0; font-size:14px; }
.menu-sheet .menu-card #disable-all-cheats { flex:0 0 auto; width:auto; min-width:88px; min-height:44px; white-space:nowrap; writing-mode:horizontal-tb; padding:8px 12px; font-size:14px; }
.menu-sheet .cheat-list { display:block; width:100%; font:14px/1.6 system-ui,sans-serif; }
.menu-sheet .named-cheat { padding:0; width:100%; }
.menu-sheet .named-cheat label { display:flex; gap:16px; min-height:52px; width:100%; }
.menu-sheet .named-cheat strong { flex:1; min-width:0; }
.menu-sheet .named-cheat input[role=switch] { appearance:none; position:relative; flex:0 0 48px; width:48px; min-width:48px; height:28px; min-height:28px; padding:0; margin:0; border:1px solid #758080; border-radius:18px; background:#4e5558; cursor:pointer; }
.menu-sheet .named-cheat input[role=switch]::before { content:''; position:absolute; top:2px; left:2px; width:22px; height:22px; background:#fff; border-radius:50%; transition:transform .15s; }
.menu-sheet .named-cheat input[role=switch]:checked { background:#298463; border-color:#4fb48a; }
.menu-sheet .named-cheat input[role=switch]:checked::before { transform:translateX(20px); }
.keyboard-binding { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; border-bottom:1px solid #ffffff24; }
.menu-sheet .keyboard-binding button { width:auto; min-width:100px; min-height:44px; padding:8px 14px; white-space:nowrap; }
.keyboard-card [role=status] { font-size:14px; color:#c7becb; }
.menu-sheet #pc-keyboard-config[hidden] { display:none!important; }
.menu-sheet .menu-footer.menu-utilities{position:static;inset:auto;flex:0 0 auto;z-index:auto;box-sizing:border-box}
.menu-sheet .save-tile[hidden]{display:none!important}
.menu-sheet .menu-panel{overflow:hidden}
@media(prefers-reduced-motion:reduce) { .menu-sheet .named-cheat input[role=switch]::before { transition:none; } }