:root {
  /* A contemporary, red-and-ivory interpretation of the Famicom shell. */
  color-scheme: light;
  --bg: #e8e1d4;
  --surface: #fffdf8;
  --surface-2: #f3ecdf;
  --line: rgba(71, 56, 46, .18);
  --text: #2a2521;
  --muted: #786f65;
  --mint: #d9343b;
  --lime: #23765b;
  --danger: #ad2630;
  --mono: Consolas, 'Cascadia Mono', 'Microsoft YaHei UI', monospace;
  --sans: 'Segoe UI', 'Microsoft YaHei UI', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: var(--bg); }
body { color: var(--text); font-family: var(--sans); }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.emulator-app {
  height: 100dvh;
  min-height: 340px;
  overflow: hidden;
  padding: max(7px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left));
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr);
  background:
    radial-gradient(85% 65% at 100% -25%, rgba(217, 52, 59, .16), transparent 68%),
    radial-gradient(75% 55% at -8% 100%, rgba(116, 77, 57, .10), transparent 71%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 1px, transparent 1px 9px),
    var(--bg);
}

.app-bar { min-width: 0; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--text); font: 700 12px var(--mono); letter-spacing: .07em; white-space: nowrap; }
.brand b { color: var(--mint); font-weight: 700; }
.brand-mark { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--mint); border-radius: 6px; color: var(--mint); font-weight: 800; transform: rotate(-7deg); }
.rom-indicator { min-width: 0; flex: 1; display: flex; align-items: center; gap: 5px; color: var(--muted); font: 10px var(--mono); }
.rom-indicator i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.rom-indicator span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-button { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; min-height: 30px; border: 1px solid var(--line); border-radius: 7px; padding: 0 8px; color: var(--text); background: rgba(255,255,255,.035); font: 10px var(--mono); }
.bar-button span { color: var(--mint); font-size: 15px; line-height: 1; }

.emulator-layout { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) 184px; gap: 5px; padding-top: 6px; }
.display-stack { min-height: 0; display: grid; grid-template-rows: 17px minmax(0, 1fr) 38px; gap: 4px; }
.display-status { display: flex; justify-content: space-between; align-items: center; min-width: 0; color: var(--muted); font: 9px var(--mono); }
.display-status > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fps { margin-left: 8px; color: var(--lime); white-space: nowrap; }
.screen-frame { position: relative; align-self: center; justify-self: center; overflow: hidden; width: min(100%, 430px); aspect-ratio: 256 / 240; border: 1px solid rgba(225,255,241,.22); border-radius: 8px; background: #000; box-shadow: 0 7px 25px rgba(0,0,0,.42), inset 0 0 0 2px #050505; }
.nes-screen { display: block; width: 100% !important; height: 100% !important; image-rendering: pixelated; touch-action: manipulation; }
.quality-soft .nes-screen { image-rendering: auto; }
.quality-scanline::after { position: absolute; z-index: 2; inset: 0; content: ''; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); }
.loading-cover { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; gap: 7px; color: var(--mint); text-align: center; background: #070c10; transition: opacity .18s ease, visibility .18s ease; }
.loading-cover.is-done { visibility: hidden; opacity: 0; }
.loading-cover strong { font-size: 12px; }.loading-cover small { color: var(--muted); font: 9px var(--mono); }
.tv-static { position:absolute; inset:0; width:100%; height:100%; display:block; image-rendering:pixelated; pointer-events:none; }
.pixel-loader { justify-self:center; width:19px; height:19px; border:3px solid rgba(217,52,59,.22); border-top-color:var(--mint); border-radius:50%; animation:rotate .8s linear infinite; }
@keyframes rotate { to { transform: rotate(1turn); } }
.quick-actions { display: flex; justify-content: space-between; gap: 3px; min-width: 0; }
.quick-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; flex: 1; border: 1px solid transparent; border-radius: 7px; padding: 0 5px; color: #b7c9c0; background: transparent; font: 9px var(--mono); }
.quick-actions button:active, .quick-actions button.is-active { color: var(--mint); border-color: rgba(120,240,189,.27); background: rgba(120,240,189,.1); }
.quick-actions i { color: var(--mint); font-size: 14px; font-style: normal; line-height: 1; }

.controller-zone { min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; padding: 7px 10px 8px; background: linear-gradient(135deg, rgba(20,48,57,.68), rgba(11,25,34,.78)); }
.controller-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; color: var(--mint); font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.controller-hint > span { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 6px var(--mint); }.controller-hint small { margin-left: auto; overflow: hidden; color: var(--muted); font: 8px var(--mono); letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; text-transform: none; }
.controller-layout { height: calc(100% - 17px); display: grid; grid-template-columns: 1fr minmax(94px, .72fr) 1fr; align-items: center; gap: 8px; max-width: 520px; margin: 0 auto; }
.dpad-control { position: relative; justify-self: start; width: min(33vw, 132px); aspect-ratio: 1; }.dpad-control img { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; }.dpad-hit { position: absolute; z-index: 1; border: 0; border-radius: 30%; background: transparent; touch-action: none; -webkit-tap-highlight-color: transparent; }.dpad-hit.is-pressed { background: rgba(120,240,189,.12); }.dpad-hit.up { top: 0; left: 27%; width: 46%; height: 38%; }.dpad-hit.down { bottom: 0; left: 27%; width: 46%; height: 38%; }.dpad-hit.left { top: 27%; left: 0; width: 38%; height: 46%; }.dpad-hit.right { top: 27%; right: 0; width: 38%; height: 46%; }
.center-controls { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }.image-control { border: 0; padding: 0; background: none; -webkit-tap-highlight-color: transparent; touch-action: none; }.image-control img { display: block; user-select: none; pointer-events: none; }.image-control.is-pressed { transform: scale(.94); filter: brightness(1.22); }.system-control { width: min(22vw, 74px); }.system-control img { width: 100%; height: auto; }.action-controls { display: flex; justify-content: end; align-items: center; gap: 2px; }.action-controls .image-control { width: min(19vw, 68px); }.action-controls .image-control img { width: 100%; height: auto; }.action-b { transform: translateY(9px); }.action-b.is-pressed { transform: translateY(9px) scale(.94); }

.menu-sheet { position: fixed; z-index: 10; inset: 0; visibility: hidden; pointer-events: none; }.menu-sheet.is-open { visibility: visible; pointer-events: auto; }.menu-backdrop { position: absolute; inset: 0; opacity: 0; background: rgba(0,0,0,.66); transition: opacity .18s ease; }.menu-sheet.is-open .menu-backdrop { opacity: 1; }.menu-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: min(79dvh, 680px); overflow: auto; border: 1px solid rgba(120,240,189,.23); border-radius: 16px 16px 0 0; padding: 15px max(13px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(13px, env(safe-area-inset-left)); color: var(--text); background: #0c181f; box-shadow: 0 -16px 50px rgba(0,0,0,.38); transform: translateY(105%); transition: transform .2s ease; }.menu-sheet.is-open .menu-panel { transform: translateY(0); }
.menu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }.menu-header p, .menu-label { margin: 0 0 3px; color: var(--mint); font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.menu-header h1 { margin: 0; font-size: 21px; letter-spacing: -.05em; }.close-button { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--mint); background: transparent; font-size: 22px; line-height: 1; }.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.menu-card { min-width: 0; min-height: 118px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: rgba(255,255,255,.024); }.menu-card strong, .menu-card > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.menu-card strong { margin-bottom: 3px; font-size: 12px; }.menu-card > span { color: var(--muted); font: 8px/1.5 var(--mono); }.card-actions { display: flex; gap: 5px; margin-top: 9px; }.card-actions input { position: absolute; width: 1px; height: 1px; opacity: 0; }.menu-action, .wide-action, .footer-action { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; color: #c9d9d1; background: transparent; font: 9px var(--mono); }.menu-action { min-height: 27px; flex: 1; padding: 0 4px; }.menu-action.primary { color: #08120f; background: var(--mint); border-color: var(--mint); }.choice-row { display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; }.choice-row button { min-width: 0; flex: 1; border: 0; padding: 7px 3px; color: var(--muted); background: transparent; font: 9px var(--mono); }.choice-row button.is-active { color: #07110e; background: var(--mint); }.wide-action { width: 100%; min-height: 27px; margin-top: 9px; }.key-hint { margin-top: 15px; color: var(--mint) !important; }.cheat-card { grid-column: span 2; min-height: 104px; }.cheat-form { display: flex; gap: 5px; }.cheat-form input { min-width: 0; flex: 1; height: 31px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; color: var(--text); background: #071117; font: 10px var(--mono); text-transform: uppercase; }.cheat-form button { border: 0; border-radius: 6px; padding: 0 9px; color: #07110e; background: var(--mint); font: 10px var(--mono); }.cheat-list { display: flex; flex-wrap: wrap; gap: 5px; min-height: 19px; margin-top: 7px; color: var(--muted); font: 9px var(--mono); }.cheat-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(120,240,189,.3); border-radius: 99px; padding: 3px 6px; color: var(--mint); }.cheat-chip button { border: 0; padding: 0; color: var(--danger); background: transparent; line-height: 1; }.menu-footer { display: flex; align-items: center; gap: 6px; margin-top: 11px; }.footer-action { min-height: 29px; padding: 0 8px; }.menu-footer > span { min-width: 0; margin-left: auto; color: var(--muted); font: 8px var(--mono); text-align: right; }.toast { position: fixed; z-index: 20; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: calc(100% - 28px); transform: translate(-50%, 100px); border: 1px solid rgba(120,240,189,.32); border-radius: 8px; padding: 9px 11px; color: var(--text); background: #152a32; box-shadow: 0 8px 24px rgba(0,0,0,.38); font: 10px var(--mono); opacity: 0; transition: .18s ease; }.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* Famicom-inspired shell treatment.  The game display stays deliberately dark
   while everything around it is warm ivory, graphite, and signature red. */
.app-bar { border-bottom-color: rgba(217,52,59,.28); }
.brand-mark { border-color: #b91f29; color: #fffaf3; background: var(--mint); box-shadow: 0 2px 0 #9c2027; }
.rom-indicator i { background: var(--lime); box-shadow: 0 0 8px rgba(35,118,91,.55); }
.bar-button { border-color: rgba(126,70,63,.25); background: rgba(255,253,248,.78); box-shadow: 0 1px 0 rgba(255,255,255,.76) inset; }
.screen-frame { border: 3px solid #39332e; border-radius: 11px; box-shadow: 0 7px 0 rgba(80,57,47,.18), 0 12px 25px rgba(65,47,38,.20), inset 0 0 0 2px #050505; }
.loading-cover { color: #fff7ee; background: #292420; }
.quick-actions button { color: var(--muted); }
.quick-actions button:active, .quick-actions button.is-active { border-color: rgba(217,52,59,.30); background: rgba(217,52,59,.10); }
.controller-zone { border-color: rgba(126,70,63,.23); border-radius: 13px; background: linear-gradient(135deg, rgba(255,253,248,.96), rgba(239,229,214,.92)); box-shadow: 0 5px 14px rgba(76,49,42,.18), 0 1px 0 rgba(255,255,255,.85) inset; }
.controller-hint > span { box-shadow: 0 0 6px rgba(217,52,59,.58); }
.dpad-hit.is-pressed { background: rgba(217,52,59,.16); }
.menu-panel { border-color: rgba(217,52,59,.31); background: #fffaf2; box-shadow: 0 -16px 50px rgba(65,47,38,.24); }
.menu-card { background: rgba(255,255,255,.54); }
.menu-action, .wide-action, .footer-action { color: var(--text); background: #fffdf8; }
.menu-action.primary, .choice-row button.is-active, .cheat-form button { color: #fffaf4; background: var(--mint); border-color: var(--mint); }
.cheat-form input { color: var(--text); background: #fffefb; }
.cheat-chip { border-color: rgba(217,52,59,.3); }
.toast { border-color: rgba(217,52,59,.35); color: #fffaf4; background: #8f2930; box-shadow: 0 8px 24px rgba(65,47,38,.30); }

/* Compact menu extensions: game API, four independent save slots, and a
   LAN-room panel all remain inside the menu rather than adding page scroll. */
.rom-card { min-height: 177px; }
.api-loader { margin-top: 9px; padding-top: 8px; border-top: 1px dashed rgba(126,70,63,.25); }
.api-loader label { display: block; margin-bottom: 4px; color: var(--muted); font: 8px var(--mono); }
.api-loader > div { display: flex; gap: 5px; }
.api-loader input, .lan-actions input { min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 0 7px; color: var(--text); background: #fffefb; font: 10px var(--mono); }
.api-loader input { width: 74px; height: 27px; }
.api-loader > div .menu-action { flex: 1; }
.api-loader > span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.save-card { min-height: 142px; }
.save-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.save-slots button { display: grid; gap: 2px; min-height: 40px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: #fffdf8; font: 9px var(--mono); }
.save-slots button b { color: var(--text); font-size: 11px; }
.save-slots button small { font-size: 7px; }
.save-slots button.is-selected { border-color: var(--mint); color: #fffaf4; background: var(--mint); box-shadow: 0 2px 0 #a3252c; }
.save-slots button.is-selected b { color: #fffaf4; }
.lan-card { grid-column: span 2; min-height: 138px; }
.lan-actions { display: grid; grid-template-columns: minmax(75px, .9fr) minmax(64px, .75fr) minmax(52px, .58fr) minmax(52px, .58fr); gap: 5px; margin-top: 9px; }
.lan-actions input { height: 27px; width: 100%; text-transform: uppercase; }
.lan-actions .menu-action { min-width: 0; padding-inline: 4px; }
.lan-actions button:disabled { cursor: not-allowed; opacity: .48; }
.lan-address { margin-top: 6px; color: var(--muted) !important; font-size: 8px !important; }
.controller-zone, .controller-layout, .dpad-control, .center-controls, .action-controls { touch-action: none; }

@media (orientation: landscape) and (max-height: 620px) {
  .emulator-app { grid-template-rows: 34px minmax(0, 1fr); padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: max(4px, env(safe-area-inset-bottom)); }.app-bar { gap: 6px; }.brand { font-size: 10px; }.brand-mark { width: 19px; height: 19px; }.bar-button { min-height: 25px; }.emulator-layout { grid-template-columns: minmax(0, 1.08fr) minmax(200px, .92fr); grid-template-rows: 1fr; gap: 10px; padding-top: 4px; }.display-stack { grid-template-rows: 14px minmax(0, 1fr) 29px; }.screen-frame { width: auto; height: 100%; max-width: 100%; aspect-ratio: 256 / 240; }.quick-actions button { padding: 0 2px; }.quick-actions i { font-size: 12px; }.quick-actions span { font-size: 8px; }.controller-zone { padding: 5px 8px; }.controller-hint { margin-bottom: 0; font-size: 8px; }.controller-layout { height: calc(100% - 12px); grid-template-columns: 1fr 82px 1fr; }.dpad-control { width: min(24vw, 123px); }.system-control { width: min(15vw, 68px); }.action-controls .image-control { width: min(16vw, 65px); }.action-b { transform: translateY(5px); }.action-b.is-pressed { transform: translateY(5px) scale(.94); }.menu-panel { left: auto; width: min(520px, 94vw); max-height: 94dvh; border-radius: 13px 0 0 13px; transform: translateX(105%); }.menu-sheet.is-open .menu-panel { transform: translateX(0); }
}

/* Landscape is a true handheld playfield: the video stays in the visual
   centre, the D-pad and face buttons sit at the thumb edges, and Select / Start
   bracket the lower centre without colliding with the utility row. */
@media (orientation: landscape) and (max-width: 1180px) and (any-pointer: coarse), (orientation: landscape) and (max-height: 620px) {
  .emulator-app {
    grid-template-rows: 34px minmax(0, 1fr);
    padding-top: max(4px, env(safe-area-inset-top));
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }

  .app-bar { gap: 6px; }
  .brand { font-size: 10px; }
  .brand-mark { width: 19px; height: 19px; }
  .bar-button { min-height: 25px; }

  .emulator-layout {
    position: relative;
    display: block;
    min-height: 0;
    padding-top: 4px;
    isolation: isolate;
  }

  .display-stack {
    position: absolute;
    z-index: 1;
    inset: 4px clamp(116px, 20vw, 226px) 0;
    display: grid;
    grid-template-rows: 14px minmax(0, 1fr) 56px;
    gap: 3px;
  }

  .display-status { font-size: 8px; }
  .screen-frame { width: auto; height: 100%; max-width: 100%; }
  .quick-actions { align-self: start; height: 23px; gap: 2px; }
  .quick-actions button { padding: 0 2px; border-radius: 5px; }
  .quick-actions i { font-size: 12px; }
  .quick-actions span { display: none; }

  /* The controller becomes a transparent interaction layer above the centred
     display. Empty portions retain pointer pass-through to the game canvas. */
  .controller-zone {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    pointer-events: none;
  }

  .controller-hint { display: none; }
  .controller-layout {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    pointer-events: none;
  }

  .dpad-control {
    position: absolute;
    left: max(5px, env(safe-area-inset-left));
    top: 48%;
    width: clamp(92px, 20vw, 137px);
    transform: translateY(-50%);
    pointer-events: auto;
  }

  .action-controls {
    position: absolute;
    right: max(5px, env(safe-area-inset-right));
    top: 48%;
    gap: 4px;
    transform: translateY(-50%);
    pointer-events: auto;
  }

  .action-controls .image-control { width: clamp(53px, 10vw, 75px); }
  .action-b { transform: translateY(6px); }
  .action-b.is-pressed { transform: translateY(6px) scale(.94); }

  .center-controls {
    position: absolute;
    left: 50%;
    bottom: 1px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* Keep these two buttons inside the lower left/right of the video area,
       rather than pushing them out beside the primary thumb controls. */
    width: min(38vw, 310px);
    transform: translateX(-50%);
    pointer-events: auto;
  }

  .system-control { width: clamp(51px, 10vw, 61px); }

  .menu-panel {
    left: auto;
    width: min(520px, 94vw);
    max-height: 94dvh;
    border-radius: 13px 0 0 13px;
    transform: translateX(105%);
  }

  .menu-sheet.is-open .menu-panel { transform: translateX(0); }
}

@media (max-width: 360px) and (orientation: portrait) { .brand b, .bar-button b { display: none; }.emulator-layout { grid-template-rows: minmax(0, 1fr) 171px; }.controller-zone { padding-inline: 6px; }.controller-layout { grid-template-columns: 1fr 80px 1fr; }.quick-actions span { display: none; }.quick-actions i { font-size: 15px; }.menu-grid { grid-template-columns: 1fr; }.cheat-card, .lan-card { grid-column: auto; }.lan-actions { grid-template-columns: 1fr 76px 58px 58px; } }
@media (max-height: 600px) and (orientation: portrait) { .emulator-layout { grid-template-rows: minmax(0, 1fr) 152px; }.controller-zone { padding-top: 4px; }.controller-hint { margin-bottom: 0; }.controller-layout { height: calc(100% - 11px); }.dpad-control { width: min(29vw, 105px); }.system-control { width: min(20vw, 59px); }.action-controls .image-control { width: min(17vw, 56px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Direction feedback comes from the supplied D-pad artwork.  Do not paint a
   translucent red hit zone above it: it obscures the control during play. */
.dpad-hit.is-pressed { background: transparent !important; }

/* A mobile menu is a focused control sheet, not a miniature desktop panel.
   The page itself never scrolls; only this deliberate sheet can scroll when
   every optional emulator setting is shown. */
@media (max-width: 600px) and (orientation: portrait) {
  .menu-panel {
    max-height: 94dvh;
    border-radius: 16px 16px 0 0;
    padding: 14px 14px max(16px, env(safe-area-inset-bottom));
  }

  .menu-header { margin-bottom: 10px; }
  .menu-header h1 { font-size: 22px; }
  .menu-grid { grid-template-columns: 1fr; gap: 9px; }
  .menu-card, .rom-card, .save-card, .lan-card { grid-column: auto; min-height: 0; padding: 12px; }
  .menu-card strong { font-size: 13px; }
  .menu-card > span { font-size: 9px; }
  .cheat-card { grid-column: auto; }
  .menu-action, .wide-action, .footer-action { min-height: 34px; font-size: 10px; }
  .api-loader input, .lan-actions input { min-height: 34px; font-size: 11px; }
  .api-loader input { width: 92px; }
  .save-slots button { min-height: 48px; }
  .lan-actions { grid-template-columns: minmax(100px, 1fr) 76px 58px 58px; }
  .menu-footer {
    position: sticky;
    bottom: -16px;
    margin-inline: -14px;
    padding: 10px 14px max(8px, env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, rgba(255,250,242,.78), #fffaf2 30%);
  }
}

/* The one-tap horizontal control mode is intentionally independent of the
   platform orientation API.  In portrait it turns the current viewport into a
   compact, centred playfield with thumb controls at both edges.  Rotating the
   device still gives the display more physical area, but is never required. */
@media (orientation: portrait) {
  .emulator-app.force-landscape .emulator-layout {
    position: relative;
    display: block;
    min-height: 0;
    padding-top: 4px;
    isolation: isolate;
  }

  .emulator-app.force-landscape .display-stack {
    position: absolute;
    z-index: 1;
    inset: 4px clamp(57px, 16vw, 84px) 154px;
    display: grid;
    grid-template-rows: 16px minmax(0, 1fr) 30px;
    gap: 3px;
  }

  .emulator-app.force-landscape .screen-frame {
    width: auto;
    height: 100%;
    max-width: 100%;
  }

  .emulator-app.force-landscape .quick-actions {
    height: 28px;
    gap: 2px;
  }

  .emulator-app.force-landscape .quick-actions button {
    padding-inline: 2px;
  }

  .emulator-app.force-landscape .quick-actions span {
    display: none;
  }

  .emulator-app.force-landscape .controller-zone {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: visible;
    border: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    pointer-events: none;
  }

  .emulator-app.force-landscape .controller-hint { display: none; }

  .emulator-app.force-landscape .controller-layout {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    pointer-events: none;
  }

  .emulator-app.force-landscape .dpad-control {
    position: absolute;
    left: max(4px, env(safe-area-inset-left));
    top: 45%;
    width: clamp(70px, 21vw, 96px);
    transform: translateY(-50%);
    pointer-events: auto;
  }

  .emulator-app.force-landscape .action-controls {
    position: absolute;
    right: max(4px, env(safe-area-inset-right));
    top: 45%;
    gap: 2px;
    transform: translateY(-50%);
    pointer-events: auto;
  }

  .emulator-app.force-landscape .action-controls .image-control {
    width: clamp(47px, 13vw, 61px);
  }

  .emulator-app.force-landscape .action-b { transform: translateY(5px); }
  .emulator-app.force-landscape .action-b.is-pressed { transform: translateY(5px) scale(.94); }

  .emulator-app.force-landscape .center-controls {
    position: absolute;
    left: 50%;
    bottom: 46px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: min(66vw, 270px);
    transform: translateX(-50%);
    pointer-events: auto;
  }

  .emulator-app.force-landscape .system-control {
    width: clamp(48px, 13vw, 62px);
  }
}

/* --------------------------------------------------------------------------
   Adaptive virtual controller

   `data-control-skin` and `data-button-layout` are deliberately presentation
   hooks.  A core loader can change them without rebuilding the control DOM:
   nes → two face buttons, sfc / arcade → four face buttons + shoulders, and
   gba → two face buttons + shoulders.  Every image comes from the supplied
   drawable-nodpi-v4 set so a skin switch is immediate and offline-friendly.
   -------------------------------------------------------------------------- */
.emulator-app {
  --playfield-scale: 1;
  --control-opacity: 1;
  --control-scale: 1;
  --dpad-x: 0px;
  --dpad-y: 0px;
  --actions-x: 0px;
  --actions-y: 0px;
}

.dpad-control .skin-art,
.image-control .skin-art { display: none; }

.controller-zone[data-control-skin="nes"] .skin-nes,
.controller-zone[data-control-skin="sfc"] .skin-sfc,
.controller-zone[data-control-skin="gba"] .skin-gba,
.controller-zone[data-control-skin="arcade"] .skin-arcade { display: block; }

.controller-zone .is-optional,
.controller-zone .shoulder-controls { display: none; }

.controller-zone[data-control-skin="sfc"] .is-sfc,
.controller-zone[data-control-skin="gba"] .is-gba,
.controller-zone[data-control-skin="arcade"] .is-arcade { display: inline-flex; }

.controller-zone[data-control-skin="sfc"] .shoulder-controls,
.controller-zone[data-control-skin="gba"] .shoulder-controls,
.controller-zone[data-control-skin="arcade"] .shoulder-controls { display: flex; }

.controller-layout { position: relative; }
.dpad-control,
.center-controls,
.action-controls,
.shoulder-controls {
  opacity: var(--control-opacity);
  will-change: transform, opacity;
}

.dpad-control {
  transform: translate(var(--dpad-x), var(--dpad-y)) scale(var(--control-scale));
  transform-origin: center;
}

.action-controls {
  transform: translate(var(--actions-x), var(--actions-y)) scale(var(--control-scale));
  transform-origin: center right;
}

.screen-frame {
  transform: scale(var(--playfield-scale));
  transform-origin: center;
}

/* EmulatorJS is isolated in a same-origin frame so its global loader and
   RetroArch runtime cannot collide with the native NES runtime.  The parent
   owns all visible controls; the frame contains only the game video. */
.multicore-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}
.multicore-stage[hidden] { display: none; }
.multicore-stage iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.nes-screen[hidden] { display: none; }

.shoulder-controls {
  position: absolute;
  z-index: 4;
  top: -2px;
  left: 14%;
  right: 14%;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
}

.shoulder-control { width: min(17vw, 64px); }
.shoulder-control img { width: 100%; height: auto; }

.controller-zone[data-control-skin="sfc"] .action-controls,
.controller-zone[data-control-skin="arcade"] .action-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: min(38vw, 146px);
}

.controller-zone[data-control-skin="sfc"] .action-controls .image-control,
.controller-zone[data-control-skin="arcade"] .action-controls .image-control { width: 100%; }

.controller-zone[data-control-skin="sfc"] .action-b,
.controller-zone[data-control-skin="arcade"] .action-b,
.controller-zone[data-control-skin="sfc"] .action-b.is-pressed,
.controller-zone[data-control-skin="arcade"] .action-b.is-pressed { transform: none; }

/* SFC's familiar diamond reads Y/X above B/A, independent of the NES-first
   source order that preserves the existing input IDs. */
.controller-zone[data-control-skin="sfc"] .action-y { order: 1; }
.controller-zone[data-control-skin="sfc"] .action-x { order: 2; }
.controller-zone[data-control-skin="sfc"] .action-b { order: 3; }
.controller-zone[data-control-skin="sfc"] .action-a { order: 4; }

/* The layout card keeps optional tuning out of the normal, concise menu. */
.layout-card { grid-column: span 2; min-height: 0; }
.layout-mode-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.layout-mode-options button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 4px;
  color: var(--text);
  background: #fffdf8;
  font: 9px/1.2 var(--mono);
}
.layout-mode-options button.is-active { border-color: var(--mint); color: #fffaf4; background: var(--mint); }
.rotation-row { margin-top: 7px; }
.rotation-action { margin-top: 0; }
.rotation-row > span,
.layout-card > span { display: block; margin-top: 5px; color: var(--muted); font: 8px/1.45 var(--mono); }
.layout-tuning { margin-top: 8px; border-top: 1px dashed rgba(126,70,63,.25); }
.layout-tuning summary { padding: 8px 0 2px; color: var(--text); cursor: pointer; font: 9px var(--mono); }
.layout-tuning summary::marker { color: var(--mint); }
.tuning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 9px; padding-top: 7px; }
.range-field { display: grid; gap: 4px; min-width: 0; color: var(--muted); font: 8px var(--mono); }
.range-field > span { display: flex; justify-content: space-between; gap: 5px; }
.range-field output { color: var(--mint); }
.range-field input { width: 100%; accent-color: var(--mint); }
.layout-reset { margin-top: 9px; }

@media (max-width: 600px) and (orientation: portrait) {
  .layout-card { grid-column: auto; }
  .layout-mode-options button { min-height: 40px; font-size: 9px; }
  .rotation-action { min-height: 38px; }
  .tuning-grid { grid-template-columns: 1fr; gap: 9px; }
}

/* --------------------------------------------------------------------------
   Three handheld layouts

   The standard thumb layout is the existing sideways-control arrangement.
   Large reserves roughly three quarters of the visual field for the display
   while maintaining side controls.  Edge fills the playfield and moves each
   control onto the game image boundary.  The runtime only needs to set
   data-layout-mode on #app; the old .force-landscape class remains compatible.
   -------------------------------------------------------------------------- */
@media (orientation: portrait) {
  :is(.emulator-app.force-landscape:not([data-layout-mode]), .emulator-app[data-layout-mode="thumb"]) .emulator-layout {
    position: relative;
    display: block;
    min-height: 0;
    padding-top: 4px;
    isolation: isolate;
  }

  :is(.emulator-app.force-landscape:not([data-layout-mode]), .emulator-app[data-layout-mode="thumb"]) .display-stack {
    position: absolute;
    z-index: 1;
    inset: 4px clamp(57px, 16vw, 84px) 154px;
    display: grid;
    grid-template-rows: 16px minmax(0, 1fr) 30px;
    gap: 3px;
  }

  :is(.emulator-app.force-landscape:not([data-layout-mode]), .emulator-app[data-layout-mode="thumb"]) .screen-frame {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 256 / 240;
  }

  :is(.emulator-app.force-landscape:not([data-layout-mode]), .emulator-app[data-layout-mode="thumb"]) .quick-actions {
    height: 28px;
    gap: 2px;
  }

  :is(.emulator-app.force-landscape:not([data-layout-mode]), .emulator-app[data-layout-mode="thumb"]) .quick-actions button { padding-inline: 2px; }
  :is(.emulator-app.force-landscape:not([data-layout-mode]), .emulator-app[data-layout-mode="thumb"]) .quick-actions span { display: none; }

  :is(.emulator-app.force-landscape:not([data-layout-mode]), .emulator-app[data-layout-mode="thumb"]) .controller-zone,
  .emulator-app[data-layout-mode="large"] .controller-zone {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: visible;
    border: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    pointer-events: none;
  }

  :is(.emulator-app.force-landscape:not([data-layout-mode]), .emulator-app[data-layout-mode="thumb"]) .controller-hint,
  .emulator-app[data-layout-mode="large"] .controller-hint { display: none; }

  :is(.emulator-app.force-landscape:not([data-layout-mode]), .emulator-app[data-layout-mode="thumb"]) .controller-layout,
  .emulator-app[data-layout-mode="large"] .controller-layout {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    pointer-events: none;
  }

  :is(.emulator-app.force-landscape:not([data-layout-mode]), .emulator-app[data-layout-mode="thumb"]) .dpad-control {
    position: absolute;
    left: max(4px, env(safe-area-inset-left));
    top: 40%;
    width: clamp(70px, 21vw, 96px);
    transform: translate(var(--dpad-x), calc(-50% + var(--dpad-y))) scale(var(--control-scale));
    pointer-events: auto;
  }

  :is(.emulator-app.force-landscape:not([data-layout-mode]), .emulator-app[data-layout-mode="thumb"]) .action-controls {
    position: absolute;
    right: max(4px, env(safe-area-inset-right));
    top: 40%;
    gap: 2px;
    transform: translate(var(--actions-x), calc(-50% + var(--actions-y))) scale(var(--control-scale));
    pointer-events: auto;
  }

  :is(.emulator-app.force-landscape:not([data-layout-mode]), .emulator-app[data-layout-mode="thumb"]) .action-controls .image-control { width: clamp(47px, 13vw, 61px); }
  :is(.emulator-app.force-landscape:not([data-layout-mode]), .emulator-app[data-layout-mode="thumb"]) .action-b { transform: translateY(5px); }
  :is(.emulator-app.force-landscape:not([data-layout-mode]), .emulator-app[data-layout-mode="thumb"]) .action-b.is-pressed { transform: translateY(5px) scale(.94); }

  :is(.emulator-app.force-landscape:not([data-layout-mode]), .emulator-app[data-layout-mode="thumb"]) .center-controls {
    position: absolute;
    left: 50%;
    bottom: 46px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: min(66vw, 270px);
    transform: translateX(-50%);
    pointer-events: auto;
  }

  :is(.emulator-app.force-landscape:not([data-layout-mode]), .emulator-app[data-layout-mode="thumb"]) .system-control { width: clamp(48px, 13vw, 62px); }
  :is(.emulator-app.force-landscape:not([data-layout-mode]), .emulator-app[data-layout-mode="thumb"]) .shoulder-controls { top: 2px; left: 18%; right: 18%; }

  /* Large screen: side controls overlap only the outer edge, leaving the
     centre close to 3/4 of the available horizontal playfield. */
  .emulator-app[data-layout-mode="large"] .emulator-layout {
    position: relative;
    display: block;
    min-height: 0;
    padding-top: 4px;
    isolation: isolate;
  }

  .emulator-app[data-layout-mode="large"] .display-stack {
    position: absolute;
    z-index: 1;
    inset: 4px 6px 114px;
    display: grid;
    grid-template-rows: 16px minmax(0, 1fr) 31px;
    gap: 3px;
  }

  .emulator-app[data-layout-mode="large"] .screen-frame { width: 100%; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: 256 / 240; }
  .emulator-app[data-layout-mode="large"] .quick-actions { height: 29px; gap: 2px; }
  .emulator-app[data-layout-mode="large"] .quick-actions button { padding-inline: 2px; }
  .emulator-app[data-layout-mode="large"] .quick-actions span { display: none; }

  .emulator-app[data-layout-mode="large"] .dpad-control {
    position: absolute;
    left: -4px;
    top: 46%;
    width: clamp(76px, 23vw, 108px);
    transform: translate(var(--dpad-x), calc(-50% + var(--dpad-y))) scale(var(--control-scale));
    pointer-events: auto;
  }

  .emulator-app[data-layout-mode="large"] .action-controls {
    position: absolute;
    right: -4px;
    top: 46%;
    gap: 1px;
    transform: translate(var(--actions-x), calc(-50% + var(--actions-y))) scale(var(--control-scale));
    pointer-events: auto;
  }

  .emulator-app[data-layout-mode="large"] .action-controls .image-control { width: clamp(50px, 14vw, 65px); }
  .emulator-app[data-layout-mode="large"] .action-b { transform: translateY(5px); }
  .emulator-app[data-layout-mode="large"] .action-b.is-pressed { transform: translateY(5px) scale(.94); }
  .emulator-app[data-layout-mode="large"] .center-controls {
    position: absolute;
    left: 50%;
    bottom: 45px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: min(69vw, 290px);
    transform: translateX(-50%);
    pointer-events: auto;
  }
  .emulator-app[data-layout-mode="large"] .system-control { width: clamp(48px, 13vw, 64px); }
  .emulator-app[data-layout-mode="large"] .shoulder-controls { top: 2px; left: 17%; right: 17%; }
}

/* Edge layout intentionally works in either physical orientation.  It is the
   only mode that stretches the screen frame to the whole playfield; the user
   can still reduce --playfield-scale if they prefer visible black borders. */
.emulator-app[data-layout-mode="edge"] {
  position: fixed;
  z-index: 1;
  inset: 0;
  min-height: 0;
  padding: 0;
  grid-template-rows: minmax(0, 1fr);
  background: #000;
}

.emulator-app[data-layout-mode="edge"] .app-bar {
  position: absolute;
  z-index: 5;
  top: max(7px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  left: auto;
  height: auto;
  border: 0;
  pointer-events: none;
}

.emulator-app[data-layout-mode="edge"] .app-bar .brand,
.emulator-app[data-layout-mode="edge"] .app-bar .rom-indicator { display: none; }
.emulator-app[data-layout-mode="edge"] .bar-button { pointer-events: auto; color: #fffaf4; background: rgba(27,21,19,.55); backdrop-filter: blur(8px); }
.emulator-app[data-layout-mode="edge"] .emulator-layout { position: relative; display: block; min-height: 0; padding: 0; }
.emulator-app[data-layout-mode="edge"] .display-stack { position: absolute; z-index: 1; inset: 0; display: block; }
.emulator-app[data-layout-mode="edge"] .display-status { position: absolute; z-index: 3; top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: 62px; color: rgba(255,250,244,.78); text-shadow: 0 1px 2px #000; }
.emulator-app[data-layout-mode="edge"] .screen-frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
.emulator-app[data-layout-mode="edge"] .quick-actions { position: absolute; z-index: 4; right: 50%; bottom: max(7px, env(safe-area-inset-bottom)); width: min(52vw, 310px); height: 29px; transform: translateX(50%); }
.emulator-app[data-layout-mode="edge"] .quick-actions button { color: rgba(255,250,244,.9); background: rgba(27,21,19,.45); backdrop-filter: blur(7px); }
.emulator-app[data-layout-mode="edge"] .quick-actions span { display: none; }
.emulator-app[data-layout-mode="edge"] .controller-zone { position: absolute; z-index: 2; inset: 0; overflow: visible; border: 0; padding: 0; background: none; box-shadow: none; pointer-events: none; }
.emulator-app[data-layout-mode="edge"] .controller-hint { display: none; }
.emulator-app[data-layout-mode="edge"] .controller-layout { position: relative; display: block; width: 100%; height: 100%; max-width: none; margin: 0; pointer-events: none; }
.emulator-app[data-layout-mode="edge"] .dpad-control { position: absolute; left: max(4px, env(safe-area-inset-left)); top: 50%; width: clamp(84px, 22vw, 144px); transform: translate(var(--dpad-x), calc(-50% + var(--dpad-y))) scale(var(--control-scale)); pointer-events: auto; }
.emulator-app[data-layout-mode="edge"] .action-controls { position: absolute; right: max(4px, env(safe-area-inset-right)); top: 50%; gap: 3px; transform: translate(var(--actions-x), calc(-50% + var(--actions-y))) scale(var(--control-scale)); pointer-events: auto; }
.emulator-app[data-layout-mode="edge"] .action-controls .image-control { width: clamp(55px, 13vw, 88px); }
.emulator-app[data-layout-mode="edge"] .action-b { transform: translateY(8px); }
.emulator-app[data-layout-mode="edge"] .action-b.is-pressed { transform: translateY(8px) scale(.94); }
.emulator-app[data-layout-mode="edge"] .center-controls { position: absolute; z-index: 4; left: 50%; bottom: max(42px, calc(12px + env(safe-area-inset-bottom))); display: flex; flex-direction: row; justify-content: space-between; width: min(43vw, 310px); transform: translateX(-50%); pointer-events: auto; }
.emulator-app[data-layout-mode="edge"] .system-control { width: clamp(50px, 10vw, 68px); }
.emulator-app[data-layout-mode="edge"] .shoulder-controls { top: max(6px, env(safe-area-inset-top)); left: 22%; right: 22%; }

@media (orientation: landscape) {
  .emulator-app:not([data-layout-mode="edge"]) .screen-frame { width: 100%; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: 256 / 240; }
  /* The original landscape rule centres the thumb controls with
     translateY(-50%).  Reapply the saved offsets and size here so the
     custom control settings behave identically after the handset is rotated. */
  .emulator-app:not([data-layout-mode="edge"]) .dpad-control { transform: translate(var(--dpad-x), calc(-50% + var(--dpad-y))) scale(var(--control-scale)); }
  .emulator-app:not([data-layout-mode="edge"]) .action-controls { transform: translate(var(--actions-x), calc(-50% + var(--actions-y))) scale(var(--control-scale)); }
  .emulator-app[data-layout-mode="large"] .display-stack { inset-inline: clamp(70px, 12vw, 150px); }
  .emulator-app[data-layout-mode="large"] .dpad-control { left: max(2px, env(safe-area-inset-left)); width: clamp(101px, 22vw, 153px); transform: translate(var(--dpad-x), calc(-50% + var(--dpad-y))) scale(var(--control-scale)); }
  .emulator-app[data-layout-mode="large"] .action-controls { right: max(2px, env(safe-area-inset-right)); transform: translate(var(--actions-x), calc(-50% + var(--actions-y))) scale(var(--control-scale)); }
  .emulator-app[data-layout-mode="large"] .action-controls .image-control { width: clamp(60px, 11vw, 84px); }
}

/* --------------------------------------------------------------------------
   Forced clockwise playfield

   This is intentionally CSS rotation rather than screen.orientation.lock():
   it works in installed PWAs and ordinary browser tabs where orientation lock
   is usually denied.  On a portrait device the app is laid out in a landscape
   sized box (100dvh × 100dvw), then rotated clockwise into the viewport.  The
   player turns the handset to read it, even if the operating system itself is
   locked in portrait.  `data-layout-mode="rotated"` is accepted as a compact
   alias for standard/thumb plus forced rotation.
   -------------------------------------------------------------------------- */
@media (orientation: portrait) {
  /* Edge is normally a full portrait viewport.  When the user also asks for
     forced rotation it becomes a full landscape-sized viewport before the
     same clockwise transform, so the image and edge controls rotate together. */
  .emulator-app[data-layout-mode="edge"][data-force-rotation="true"] {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100dvh;
    height: 100dvw;
    transform: translateX(100dvw) rotate(90deg);
    transform-origin: top left;
  }

  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100dvh;
    height: 100dvw;
    min-height: 0;
    padding: 4px max(5px, env(safe-area-inset-right)) 4px max(5px, env(safe-area-inset-left));
    grid-template-rows: 34px minmax(0, 1fr);
    /* 90deg maps the element's own height (100dvw) onto the negative X
       axis, so translate by that height—not by its 100dvh width. */
    transform: translateX(100dvw) rotate(90deg);
    transform-origin: top left;
  }

  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .app-bar { gap: 6px; }
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .brand { font-size: 10px; }
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .brand-mark { width: 19px; height: 19px; }
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .bar-button { min-height: 25px; }

  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .emulator-layout {
    position: relative;
    display: block;
    min-height: 0;
    padding-top: 4px;
    isolation: isolate;
  }

  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .display-stack {
    position: absolute;
    z-index: 1;
    inset: 4px clamp(116px, 20vw, 226px) 0;
    display: grid;
    grid-template-rows: 14px minmax(0, 1fr) 56px;
    gap: 3px;
  }

  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .display-status { font-size: 8px; }
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .screen-frame { width: 100%; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: 256 / 240; }
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .quick-actions { align-self: start; height: 23px; gap: 2px; }
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .quick-actions button { padding: 0 2px; border-radius: 5px; }
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .quick-actions i { font-size: 12px; }
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .quick-actions span { display: none; }

  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .controller-zone {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    pointer-events: none;
  }

  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .controller-hint { display: none; }
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .controller-layout { position: relative; display: block; width: 100%; height: 100%; max-width: none; margin: 0; pointer-events: none; }
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .dpad-control { position: absolute; left: max(5px, env(safe-area-inset-left)); top: 48%; width: clamp(92px, 20vw, 137px); transform: translate(var(--dpad-x), calc(-50% + var(--dpad-y))) scale(var(--control-scale)); pointer-events: auto; }
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .action-controls { position: absolute; right: max(5px, env(safe-area-inset-right)); top: 48%; gap: 4px; transform: translate(var(--actions-x), calc(-50% + var(--actions-y))) scale(var(--control-scale)); pointer-events: auto; }
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .action-controls .image-control { width: clamp(53px, 10vw, 75px); }
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .action-b { transform: translateY(6px); }
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .action-b.is-pressed { transform: translateY(6px) scale(.94); }
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .center-controls { position: absolute; left: 50%; bottom: 1px; display: flex; flex-direction: row; justify-content: space-between; width: min(38vw, 310px); transform: translateX(-50%); pointer-events: auto; }
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .system-control { width: clamp(51px, 10vw, 61px); }
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]):not([data-layout-mode="edge"]) .shoulder-controls { top: 2px; left: 25%; right: 25%; }

  /* A rotated menu follows the same coordinate system; otherwise it would
     appear upright over a sideways game. */
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]) ~ .menu-sheet {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100dvh;
    height: 100dvw;
    transform: translateX(100dvw) rotate(90deg);
    transform-origin: top left;
  }

  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]) ~ .menu-sheet .menu-panel {
    left: auto;
    width: min(520px, 94dvh);
    max-height: 94dvw;
    border-radius: 13px 0 0 13px;
    transform: translateX(105%);
  }

  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]) ~ .menu-sheet.is-open .menu-panel { transform: translateX(0); }
}

/* Responsive controls share one coordinate surface across cores and modes. */
.emulator-app { min-height: 0; }
.controller-zone[data-adaptive="true"] { overflow: visible !important; }
.controller-zone[data-adaptive="true"] .controller-layout {
  position: relative !important; display: block !important; width: 100% !important;
  height: 100% !important; max-width: none !important; margin: 0 !important;
  pointer-events: none;
}
.controller-zone[data-adaptive="true"] .controller-hint { display: none; }
.controller-zone[data-adaptive="true"] :is(.action-controls, .center-controls, .shoulder-controls) {
  display: contents !important; opacity: 1 !important; transform: none !important;
}
.controller-zone[data-adaptive="true"] [data-layout-control] {
  position: absolute !important; left: var(--item-x) !important; top: var(--item-y) !important;
  right: auto !important; bottom: auto !important; margin: 0 !important;
  width: var(--item-width) !important; height: var(--item-height) !important;
  transform: translate(-50%, -50%) !important; transform-origin: center !important;
  opacity: var(--item-opacity) !important; pointer-events: auto;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.controller-zone[data-adaptive="true"] [data-layout-control][hidden] { display: none !important; }
.controller-zone[data-adaptive="true"] .image-control img { width: 100%; height: 100%; object-fit: contain; }
.controller-zone[data-adaptive="true"] .image-control.is-pressed { filter: brightness(1.25); }
.controller-zone[data-adaptive="true"] .dpad-hit.is-pressed { background: transparent; }
.controller-zone[data-editing="true"] [data-layout-control] { outline: 1px dashed #2583aa; border-radius: 4px; cursor: move; }
.controller-zone[data-editing="true"] .is-layout-selected { outline: 3px solid #2583aa; }
.emulator-app .screen-frame {
  width: var(--video-width, 100%) !important; height: var(--video-height, auto) !important;
  aspect-ratio: var(--game-aspect, 1.0666667) !important;
}
.emulator-app[data-layout-mode="edge"] .screen-frame {
  inset: 50% auto auto 50%; transform: translate(-50%, -50%) scale(var(--playfield-scale));
}
.layout-editor {
  position: fixed; z-index: 12; top: max(8px, env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%); width: min(720px, calc(100% - 16px));
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px;
  border: 1px solid #cbd3d8; border-radius: 8px; background: rgba(248,251,253,.96);
  box-shadow: 0 4px 20px #0003; color: #26373f; font-size: 12px;
}
.layout-editor[hidden] { display: none; }
.layout-editor label { flex: 1; min-width: 110px; display: grid; grid-template-columns: 1fr auto; gap: 2px; }
.layout-editor label input { grid-column: span 2; width: 100%; accent-color: #2583aa; }
.layout-editor select, .layout-editor button { min-height: 36px; max-width: 100%; border: 1px solid #bfcbd1; border-radius: 4px; background: white; padding: 4px 8px; color: inherit; }
#layout-editor-save { background: #23765b; color: white; border-color: #23765b; }
.menu-backdrop { backdrop-filter: blur(16px); background: #12181da8; }
.menu-panel { background: rgba(249,251,253,.96); border-color: #cbd3d8; }
.menu-card { background: transparent; border: 0; border-bottom: 1px solid #d8dfe3; border-radius: 0; }
.menu-header h1 { letter-spacing: 0; }
.haptic-field { display: flex; gap: 8px; align-items: center; min-height: 36px; font-size: 12px; }
.haptic-field input { accent-color: var(--mint); }
.bar-button, .close-button { min-height: 42px; min-width: 42px; }

/* The video and controller use independent geometry on the same viewport. */
body { background: #111619; }
.emulator-app { position: fixed !important; inset: 0 !important; padding: 0 !important; width: 100dvw; height: 100dvh; display: block !important; background: #111619; border: 0; border-radius: 0; box-shadow: none; }
.emulator-app .app-bar, .emulator-app .display-status, .controller-hint { display: none !important; }
.emulator-app .emulator-layout { position: absolute !important; inset: 0 !important; display: block !important; padding: 0 !important; width: 100%; height: 100%; }
.emulator-app .display-stack { position: absolute !important; inset: 0 !important; display: block !important; padding: 0 !important; pointer-events: none; }
.emulator-app .screen-frame { position: absolute !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; pointer-events: auto; overflow: hidden; }
.emulator-app .nes-screen { width: 100% !important; height: 100% !important; object-fit: fill !important; }
.emulator-app .controller-zone { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; pointer-events: none; }
.emulator-app .dpad-control #dpad-art { display: block !important; }
.emulator-app .dpad-control #dpad-art[hidden], .emulator-app .dpad-frame[hidden] { display: none !important; }
.emulator-app .dpad-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.loading-cover strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.loading-cover small { display:none; }
.loading-progress { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:10px 16px; background:rgba(0,0,0,.78); color:#fff; border:1px solid #ffffff80; border-radius:4px; font:700 24px/1.2 var(--sans); font-variant-numeric:tabular-nums; min-width:90px; text-align:center; text-shadow:0 1px 2px #000; }
.loading-cover.is-failed .loading-progress { display:none; }
.loading-cover.is-failed { background:#111; padding:16px; }
.loading-cover.is-failed .tv-static { display:none; }
.loading-cover.is-failed strong { position:static; width:auto; height:auto; clip-path:none; font:600 13px/1.5 var(--sans); color:#eee; overflow-wrap:anywhere; }
.floating-menu { position: absolute; z-index: 8; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid #747f86; border-radius: 50%; background: #242c32e8; color: #f3f6f7; font-size: 23px; line-height: 1; box-shadow: 0 2px 10px #0006; touch-action: none; user-select: none; cursor: grab; }
.floating-menu:active { cursor: grabbing; background: #3a464e; }
.quick-dock { position: absolute; z-index: 7; top: max(0px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(480px, 100%); display: flex; align-items: start; justify-content: center; }
.emulator-app .quick-dock .quick-actions { position: static !important; display: flex !important; flex: 1; height: 34px !important; width: auto !important; max-width: none; gap: 0 !important; margin: 0; padding: 0; border: 0; border-radius: 0 0 6px 6px; background: #20272de8; box-shadow: none; }
.emulator-app .quick-dock .quick-actions button { flex: 1; min-width: 0; height: 34px; min-height: 34px; display: grid; place-items: center; padding: 0 7px !important; border: 0; border-right: 1px solid #3b454b; border-radius: 0 !important; background: transparent; color: #d8e0e5; box-shadow: none; font-size: 12px; }
.emulator-app .quick-dock .quick-actions i { display: none !important; }
.emulator-app .quick-dock .quick-actions span { display: block !important; white-space: nowrap; font-size: 12px !important; }
.emulator-app .quick-dock .quick-actions button.is-active { color: #4ce0df; background: #314047; }
.emulator-app .quick-dock .quick-actions button:disabled { opacity: .4; cursor: default; }
#quick-toggle { flex: 0 0 32px; width: 32px; height: 34px; min-height: 34px; border: 0; border-radius: 0 0 5px 5px; background: #20272de8; color: #d8e0e5; font-size: 20px; padding: 0; }
.quick-dock[data-collapsed="true"] .quick-actions { display: none !important; }
.quick-dock[data-collapsed="true"] #quick-toggle { height: 22px; min-height: 22px; background: #20272da8; }
.controller-zone[data-adaptive="true"] .turbo-control { display: grid; place-items: center; padding: 0; border: 3px solid #474f54; border-radius: 50%; background: #319856; color: white; box-shadow: inset 0 -5px 0 #0004, 0 2px 3px #0005; }
.turbo-control span { font-size: 18px; font-weight: 800; }
.controller-zone[data-adaptive="true"] .turbo-b { background: #ba3f48; }
.controller-zone[data-adaptive="true"] .combo-control { background: #475c63; }
.combo-control span { font-size: 14px; }
.controller-zone[data-adaptive="true"] .turbo-control.is-pressed { box-shadow: inset 0 4px 6px #0008; filter: brightness(1.18); }
.emulator-app .layout-editor { position: absolute; z-index: 12; transform: none; width: min(580px, calc(100% - 8px)); max-width: calc(100% - 8px); gap: 7px; padding: 8px; background: #20282ff5; color: #e1e7eb; border-color: #59656e; border-radius: 6px; }
.layout-editor label { min-width: 95px; }
.layout-editor select, .layout-editor button { background: #303a42; color: #e4ebef; border-color: #53616a; min-height: 32px; }
#layout-editor-drag { width: 30px; flex: 0 0 30px; padding: 0; font-size: 22px; cursor: move; touch-action: none; }
.menu-backdrop { background: #060a0ed0; backdrop-filter: blur(8px); }
.menu-sheet .menu-panel { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: min(430px, 100%); max-height: none !important; height: 100%; padding: 0; display: flex; flex-direction: column; gap: 0; border: 0; border-left: 1px solid #343e47; border-radius: 0 !important; background: #1c2229; color: #dce2e8; box-shadow: -12px 0 45px #0006; }
.menu-sheet, .layout-editor { color-scheme: dark; }
.menu-sheet .menu-header { flex: 0 0 60px; height: 60px; display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; margin: 0; border-bottom: 1px solid #353e47; }
.menu-header h1 { font-size: 18px; margin: 0; color: #edf2f6; }
.menu-header .close-button { width: 36px; height: 36px; min-width: 36px; min-height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #38444e; border-radius: 6px; background: #252e37; color: #e1e8ee; font-size: 28px; }
.menu-tabs { flex: 0 0 46px; display: flex; border-bottom: 1px solid #303941; background: #11161b; }
.menu-tabs button { flex: 1; min-width: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 0 3px; background: none; color: #939da7; font-size: 12px; white-space: nowrap; }
.menu-tabs button.is-active { color: #36dbec; border-bottom-color: #36dbec; }
.menu-sheet .menu-grid { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: block; padding: 16px; margin: 0; }
.menu-pane[hidden] { display: none; }
.menu-pane { min-width: 0; }
.menu-sheet .menu-card { display: flex; flex-direction: column; gap: 12px; padding: 0 0 20px; margin-bottom: 20px; border: 0; border-bottom: 1px solid #343d45; border-radius: 0; background: none; box-shadow: none; }
.menu-sheet .save-card { margin: 0; border: 0; padding: 0; gap: 14px; }
.menu-sheet :is(.menu-label, .menu-card > span, .range-field, .haptic-field) { color: #9ca7b1; font-size: 12px; }
.menu-sheet .menu-card > strong { color: #dde6ed; font-size: 15px; overflow-wrap: anywhere; }
.menu-sheet .menu-card > span { white-space: normal; overflow-wrap: anywhere; }
.menu-sheet :is(.menu-label, h1, strong, span, button), .quick-dock, .layout-editor { letter-spacing: 0; }
.menu-sheet .save-card .menu-label { display: none; }
#active-slot-label { font-size: 12px; font-weight: 400; color: #9ca7b1; }
.menu-sheet .save-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.menu-sheet .save-slots button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; aspect-ratio: 1; min-height: 0; padding: 24px 4px 10px; border: 2px solid #343e48; border-radius: 8px; background: #151b21; color: #929da6; box-shadow: none; }
.menu-sheet .save-slots button b { position: absolute; top: 7px; left: 7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; background: #090d11; color: white; }
.menu-sheet .save-slots button.is-selected b { background: #ff4273; }
.menu-sheet .save-slots button.is-selected { border-color: #586772; background: #192129; }
.menu-sheet .save-slots button.is-occupied { color: #55d5ca; }
.slot-symbol { font-size: 26px; line-height: 1; }
.menu-sheet .save-slots small { font-size: 11px; color: #9ca7b1; }
.slot-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.menu-sheet :is(button:not(.close-button):not([data-menu-tab]):not([data-save-slot]), input:not([type="range"]):not([type="checkbox"]), select) { min-height: 36px; padding: 7px 9px; border: 1px solid #3e4a55; border-radius: 4px; background: #29333c; color: #d6e0e7; font-size: 12px; box-shadow: none; max-width: 100%; }
.menu-sheet :is(button.is-active, button.primary, .menu-action.primary, label.primary) { background: #174653; border-color: #2b899b; color: #73dfec; }
.menu-sheet button:is(.is-active, .primary):not([data-menu-tab]):not([data-save-slot]) { background: #174653; border-color: #2b899b; color: #73dfec; }
.menu-sheet button:disabled { opacity: .4; cursor: default; }
.menu-sheet .slot-actions :is(button, select) { padding: 6px 3px; min-width: 0; }
.menu-sheet .range-field { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; }
.menu-sheet .range-field input { width: 100%; accent-color: #2dd1df; }
.menu-sheet .range-field output { color: #d5e6ec; }
.menu-sheet .choice-row { display: flex; gap: 8px; }
.menu-sheet .choice-row button { flex: 1; }
.menu-sheet .menu-footer { flex: 0 0 auto; margin: 0; padding: 12px 16px; border-top: 1px solid #343e47; display: flex; gap: 10px; background: #192027; }
.menu-sheet .menu-footer button { flex: 1; }
.menu-sheet .api-loader { background: none; border: 0; padding: 0; }
.menu-sheet .api-loader label, .menu-sheet .api-loader > span, .menu-sheet .lan-address { color: #a4b1bc; font-size: 11px; line-height: 1.6; }
.menu-sheet .api-loader > div { display: flex; gap: 8px; }
.menu-sheet .api-loader input { min-width: 0; width: 100%; }
.menu-sheet .api-loader button { white-space: nowrap; }
.menu-sheet .lan-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-sheet .lan-actions input { width: 100%; min-width: 0; text-align: center; font-size: 16px; }
.menu-sheet .cheat-form { display: flex; gap: 8px; }
.menu-sheet .cheat-form input { flex: 1; min-width: 0; }
.menu-sheet .layout-tuning { border: 0; background: none; padding: 0; color: #b4c1cc; }
.menu-sheet .layout-tuning summary { color: #b4c1cc; font-size: 12px; }
.menu-sheet :is(#layout-mode-status, #controller-skin-status) { display: none; }
.menu-sheet .layout-mode-options { display: flex; gap: 6px; }
.menu-sheet .layout-mode-options button { flex: 1; min-width: 0; padding: 7px 3px; }
.menu-sheet .cheat-list, .menu-sheet .cheat-row { background: none; color: #a5b3be; border-color: #39444d; }
.toast { visibility: hidden; pointer-events: none; }
body:has(.menu-sheet.is-open) .toast { visibility: visible; background: #293640; color: #e7edf1; border-color: #53616b; }

html, body, #app, #menu-sheet { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
input, textarea { -webkit-touch-callout: none; }
.save-tile { position: relative; min-width: 0; }
.slot-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; pointer-events: none; }
.slot-preview[hidden], .slot-read[hidden] { display: none !important; }
.menu-sheet .save-slots button.has-preview .slot-symbol { visibility: hidden; }
.menu-sheet .save-slots button.has-preview small { position: absolute; left: 6px; bottom: 7px; color: white; text-shadow: 0 1px 3px black; }
.menu-sheet .save-slots .slot-read { position: absolute; right: 6px; bottom: 6px; width: auto; height: 27px; min-height: 27px; aspect-ratio: auto; padding: 4px 7px; border: 1px solid #62818f; border-radius: 4px; background: #1d303ae8; color: #e7f6ff; font-size: 11px; }
.game-notice { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 16px; background: #080c11c9; backdrop-filter: blur(7px); color: #e0e9f0; }
@media (orientation: portrait) {
  .emulator-app:is([data-force-rotation="true"], [data-layout-mode="rotated"]) ~ .game-notice {
    right: auto; bottom: auto; width: 100dvh; height: 100dvw;
    transform: translateX(100dvw) rotate(90deg); transform-origin: top left;
  }
}
.notice-panel { width: min(430px, 100%); max-height: calc(100% - 16px); display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid #536572; border-radius: 8px; background: #202a33; box-shadow: 0 8px 30px #0008; }
.notice-panel h2 { font-size: 18px; margin: 0; }
.notice-panel p { margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.notice-panel pre { min-height: 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.5 var(--mono); color: #b8c9d4; margin: 0; }
.notice-panel button { align-self: end; min-width: 90px; min-height: 36px; border: 1px solid #3193a5; border-radius: 4px; background: #175666; color: #c5f4ff; }
@media (orientation: portrait) {
  .emulator-app[data-force-rotation="true"] { width: 100dvh !important; height: 100dvw !important; }
  .emulator-app[data-force-rotation="true"] ~ .menu-sheet .menu-panel { width: min(430px, 100%); max-height: none; }
}

@media (orientation: landscape) {
  .emulator-app[data-layout-mode="thumb"] .emulator-layout { position: relative; display: block; }
  .emulator-app[data-layout-mode="thumb"] .display-stack {
    position: absolute; inset: 6px var(--controller-side, 180px) 0; display: grid;
    grid-template-rows: 18px minmax(0, 1fr) 56px;
  }
  .emulator-app[data-layout-mode="thumb"] .controller-zone {
    position: absolute; inset: 0; padding: 0; border: 0; background: none; box-shadow: none; pointer-events: none;
  }
}
@media (orientation: portrait) {
  .emulator-app[data-force-rotation="true"][data-layout-mode="thumb"] .display-stack { inset-inline: var(--controller-side, 180px); }
  .emulator-app[data-force-rotation="true"] ~ .layout-editor {
    top: 0; left: 100vw; width: calc(100dvh - 16px); max-width: none;
    transform-origin: top left; transform: rotate(90deg) translate(8px, 8px);
  }
}

/* Portrait has a separate television and controller surface. */
#app[data-play-orientation="portrait"] .display-stack {
  top: 44px !important; bottom: auto !important; height: calc(var(--portrait-controls-top) - 50px) !important;
}
#app[data-play-orientation="portrait"] .controller-zone {
  inset: var(--portrait-controls-top) 0 max(8px, env(safe-area-inset-bottom)) !important;
  height: calc(100% - var(--portrait-controls-top) - max(8px, env(safe-area-inset-bottom))) !important;
  background: #20282e !important; border-top: 1px solid #465057 !important;
}
#app[data-play-orientation="portrait"] .quick-dock { width: calc(100% - 54px); left: 0; transform: none; }
.screen-bezel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; display: none; }
.screen-frame[data-bezel="true"] { background: transparent; }
.screen-frame[data-bezel="true"] .screen-bezel { display: block; }
.screen-frame[data-bezel="true"] :is(.nes-screen, .multicore-stage, .loading-cover, .game-activation) {
  position: absolute !important; z-index: 1; left: var(--bezel-left) !important; top: var(--bezel-top) !important;
  width: var(--bezel-width) !important; height: var(--bezel-height) !important; inset-inline-end: auto; inset-block-end: auto;
}
.screen-frame[data-bezel="true"] .nes-screen { object-fit: contain !important; }
.menu-footer a { flex: 1; text-decoration: none; font-size: 12px; }
#public-room-input { accent-color: #2bdcc5; }
.turbo-control img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.turbo-control { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; }
.floating-home { position: absolute; z-index: 25; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #73868c; border-radius: 50%; background: #182b30dd; color: #fff; padding: 0; touch-action: manipulation; }
.floating-home svg, .floating-menu svg { width: 22px; height: 22px; pointer-events: none; }
.asset-icon { display: inline-block; width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; vertical-align: middle; pointer-events: none; }
.floating-home .asset-icon, .floating-menu .asset-icon { width: 32px; height: 32px; }
.menu-tabs button { display: flex; align-items: center; justify-content: center; gap: 3px; }
.menu-tabs .asset-icon { width: 23px; height: 23px; flex-shrink: 0; }
.menu-head .asset-icon { width: 28px; height: 28px; }
html { touch-action: manipulation; }
h1, h2, h3 { text-align: center; }
.notice-actions { display: flex; justify-content: end; gap: 10px; flex-shrink: 0; }
.notice-panel .notice-cancel { border-color: #687781; background: #303b44; color: #e6edf2; }
.cheat-cloud-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #b7c3cd; font-size: 12px; }
.cheat-cloud-row button { display: grid; place-items: center; padding: 0; width: 38px; height: 38px; }
@media (max-width: 380px) { .menu-tabs button { font-size: 11px; gap: 2px; } .menu-tabs .asset-icon { width: 19px; height: 19px; } }
.room-settings { display: grid; gap: 8px; margin-block: 12px; }
.room-settings label { font-size: 12px; color: #aab8bc; }
.room-settings input, #cheat-name, #cheat-input, #game-room-password { min-width: 0; width: 100%; color: #eef6f8; background: #10191e; border: 1px solid #3a474f; border-radius: 4px; padding: 10px; font: inherit; }
.menu-sheet .cheat-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.menu-sheet .cheat-form input { height: 44px; text-transform: none; }
.menu-sheet .cheat-form button { justify-self: end; min-width: 80px; }
#cheat-input { resize: vertical; min-height: 75px; }
.cheat-list { display: grid; gap: 10px; }
.named-cheat { position: relative; padding: 12px 34px 12px 0; border-bottom: 1px solid #344049; min-width: 0; }
.named-cheat label { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.named-cheat input { width: 18px; height: 18px; flex-shrink: 0; accent-color: #2bdcc5; }
.named-cheat strong { overflow-wrap: anywhere; }
.named-cheat p, .named-cheat summary { color: #9cabaf; font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }
.named-cheat pre { font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: none; }
.named-cheat > button { position: absolute; top: 4px; right: 0; background: transparent; color: #afbac0; border: 0; width: 30px; height: 40px; font-size: 22px; }
#game-room-entry { width: min(400px, calc(100% - 32px)); padding: 24px; border: 1px solid #3d5059; border-radius: 8px; background: #1c252b; color: #f2f7f8; }
#game-room-entry::backdrop { background: #000a; }
#game-room-entry-form { display: grid; gap: 12px; }
#game-room-title { font-size: 22px; overflow-wrap: anywhere; margin: 0 0 8px; }
#game-room-error { min-height: 20px; margin: 0; font-size: 13px; color: #fb818c; }
#game-room-entry-form > div { display: flex; gap: 12px; }
#game-room-entry-form button { border: 1px solid #3d5059; border-radius: 4px; padding: 12px; background: #263d43; color: #fff; flex: 1; font: inherit; }
.named-cheat { padding:0; }
.named-cheat label { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:52px; margin:0; width:100%; }
.named-cheat strong { font-size:14px; overflow-wrap:anywhere; }
.named-cheat input[role="switch"] { appearance:none; width:42px; height:24px; min-width:42px; border:1px solid #708078; border-radius:12px; background:#424947; position:relative; margin:0; flex:none; cursor:pointer; }
.named-cheat input[role="switch"]::before { content:""; position:absolute; width:18px; height:18px; top:2px; left:2px; border-radius:50%; background:#e9efea; transition:transform .15s; }
.named-cheat input[role="switch"]:checked { background:#298463; border-color:#4fb48a; }
.named-cheat input[role="switch"]:checked::before { transform:translateX(18px); }
.named-cheat input[role="switch"]:focus-visible { outline:2px solid #f1cb70; outline-offset:4px; }
.named-cheat input[role="switch"]:disabled { opacity:.5; }

/* 负载升高时仅降低界面装饰成本，不改变游戏逻辑速度。 */
.is-performance-stressed .menu-panel,.is-performance-stressed .controller-zone{backdrop-filter:none!important;box-shadow:none!important}.is-performance-stressed .image-control.is-pressed{filter:none}.is-performance-stressed .controller-zone *{transition:none!important}

.game-consent{padding:0;border:0;border-radius:8px;width:min(480px,92vw);background:#30302e;color:#eee;font-size:14px;max-height:90dvh}.game-consent::backdrop{background:#000b}.game-consent header{display:flex;align-items:center;justify-content:space-between;background:#50504b;padding:8px 14px}.game-consent h2{font-size:16px;margin:0}.game-consent header button{font-size:28px;color:#fff;background:transparent;border:0;min-height:44px;min-width:44px}.game-consent section{padding:18px 16px}.game-consent p{text-align:center;line-height:1.7;margin:8px 0}.game-consent .consent-highlight{color:#a8dda6}.game-consent label{display:flex;gap:8px;align-items:center;margin:22px 0 14px;line-height:1.5;min-height:44px}.game-consent input{accent-color:#eed53c;min-width:18px;min-height:18px}.game-consent footer{display:grid;grid-template-columns:1fr 1fr;gap:14px}.game-consent footer button{min-height:44px;border:0;border-radius:5px;background:#262622;color:white;font-size:15px}.game-consent [data-agree]{background:#f1d33c;color:#332d14}.game-consent button:focus-visible,.game-consent input:focus-visible{outline:3px solid #a8dda6;outline-offset:3px}.game-consent button:disabled{opacity:.5}

.notice-read-preference{display:flex;align-items:center;gap:10px;min-height:44px;margin:12px 0;font-size:14px}.notice-read-preference input{width:20px;height:20px;accent-color:#dab047}
/* A text hint only: no box, scrim or hit target over the game. */
.screen-frame .game-activation { position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:12px;background:transparent;pointer-events:none;color:#fff7ee;text-align:center;box-sizing:border-box; }
.screen-frame .game-activation[hidden] { display:none; }
.screen-frame[data-bezel="true"] .game-activation { z-index:4; }
.game-activation .game-start-hint { margin:0;font:700 clamp(15px,3.5vw,22px)/1.5 var(--sans);text-shadow:0 1px 3px #000,0 0 8px #000;animation:game-start-breathe 2.4s ease-in-out infinite; }
@keyframes game-start-breathe { 0%,100% { opacity:.35; } 50% { opacity:1; } }
@media(prefers-reduced-motion:reduce){.game-activation .game-start-hint { animation:none;opacity:1; }}