:root { color-scheme: light; font: 15px/1.5 system-ui, sans-serif; background: #f5f5f2; color: #252b32; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1160px; margin: auto; padding: max(22px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
header, nav { display: flex; align-items: center; gap: 24px; }
header { justify-content: space-between; margin-bottom: 28px; }
.app-identity { display: flex; align-items: baseline; gap: 12px; }
h1 { font-size: 28px; line-height: 1.2; letter-spacing: -.04em; margin: 0; }
.app-identity p { margin: 0; font-size: 13px; color: #697078; }
p { margin: 8px 0; }
button, select { font: inherit; border: 1px solid #c9cdce; border-radius: 8px; background: #fff; color: inherit; padding: 10px 16px; }
button, summary { cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .42; cursor: default; }
button:hover:enabled { background: #edf0ec; }
:focus-visible { outline: 3px solid #306e59; outline-offset: 3px; }
.player { display: grid; grid-template-columns: minmax(0, 792px) minmax(220px, 1fr); align-items: center; gap: 16px 32px; }
.screen { position: relative; display: grid; place-items: center; overflow: hidden; background: #10161b; border-radius: 12px; padding: 12px; min-width: 0; }
canvas { display: block; width: 768px; height: auto; aspect-ratio: 256 / 224; max-width: 100%; object-fit: fill; image-rendering: pixelated; background: #10161b; }
#placeholder { position: absolute; color: #aab4bb; font-size: 14px; pointer-events: none; }
#placeholder[hidden] { display: none; }
/* Fixed slot geometry: names and status never resize the playback area. */
.game-entry { min-width: 0; display: grid; gap: 12px; }
.cartridge-value { min-width: 0; }
#cartridge-label { color: #697078; font-size: 11px; }
#current-game { margin: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#change-cartridge { white-space: nowrap; }
#cartridge-picker { width: min(360px, calc(100vw - 32px)); padding: 16px; border: 1px solid #c9cdce; border-radius: 12px; background: #fff; color: inherit; box-shadow: 0 8px 32px #10201830; }
#cartridge-title { font-size: 15px; margin: 0 0 12px; }
#cartridge-picker button { display: block; width: 100%; text-align: left; }
#cartridge-picker button + button { margin-top: 8px; }
.toolbar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toolbar button { padding: 7px 12px; font-size: 13px; }
#play { width: 64px; flex-shrink: 0; }
#volume-control { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.toolbar #mute { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; }
#volume { width: 96px; height: 44px; margin: 0; accent-color: #306e59; cursor: pointer; }
#mute svg { pointer-events: none; }
.mute-mark, .muted .sound-waves { display: none; }
.muted .mute-mark { display: initial; }
#status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; margin: 0 0 0 auto; color: #4c6256; font-size: 13px; }
#error { color: #a32f29; white-space: pre-wrap; }
#audio-status { color: #805511; }
#error:empty, #audio-status:empty { display: none; }
details .disclosure { position: absolute; z-index: 5; top: 64px; right: max(16px, calc((100vw - 1112px) / 2)); width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 90px); overflow: auto; padding: 20px; border: 1px solid #c9cdce; background: #fff; border-radius: 12px; box-shadow: 0 8px 32px #10201820; }
summary { font-size: 13px; color: #58665f; }
.disclosure h2 { font-size: 20px; }
.disclosure p { margin: 12px 0; }
a { color: #285e4b; }
.touch-controls { display: none; }
@media (max-width: 760px), (pointer: coarse), (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
  main { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  header { margin-bottom: 12px; gap: 10px; }
  .app-identity { display: block; flex-shrink: 0; }
  h1 { font-size: 20px; }
  .app-identity p { font-size: 10px; line-height: 1.2; }
  nav { gap: 12px; }
  summary { font-size: 11px; }
  .player { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .screen { padding: 6px; border-radius: 8px; }
  canvas { width: 100% !important; }
  .game-entry { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
  #change-cartridge { font-size: 12px; padding: 10px; }
  .toolbar { gap: 4px; }
  .toolbar button { padding: 7px 8px; }
  #status { flex: 1 0 100%; margin: 2px 0 0; }
  .touch-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .left-controls, .right-controls { display: grid; justify-items: center; gap: 8px; }
  .touch-controls button, .dpad { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .touch-controls button { min-width: 44px; min-height: 44px; padding: 0; font-weight: 650; }
  .touch-controls button.pressed { background: #285e4b; border-color: #285e4b; color: white; transform: translateY(1px); }
  .shoulder { width: 100%; max-width: 132px; border-radius: 12px 12px 6px 6px; }
  .dpad, .face-buttons { display: grid; grid-template: repeat(3, 44px) / repeat(3, 44px); }
  .dpad button:nth-child(1), .face-buttons button:nth-child(1) { grid-area: 1 / 2; }
  .dpad button:nth-child(2), .face-buttons button:nth-child(2) { grid-area: 2 / 1; }
  .dpad button:nth-child(3), .face-buttons button:nth-child(3) { grid-area: 2 / 3; }
  .dpad button:nth-child(4), .face-buttons button:nth-child(4) { grid-area: 3 / 2; }
  .face-buttons button { border-radius: 50%; background: #e5e8e2; }
  .system { min-width: 72px !important; font-size: 12px; }
  .left-controls .system { justify-self: end; }
  .right-controls .system { justify-self: start; }
  @media (orientation: portrait) {
    /* Reserve the header, entry metadata, actions and 44px controls before sizing video. */
    canvas { width: min(100%, max(1px, calc((100svh - 484px - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))) * 256 / 224))) !important; }
  }
}
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
  main { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  header { margin-bottom: 6px; }
  .player { grid-template-columns: 132px minmax(0, 1fr) 132px; gap: 6px 10px; }
  .screen { grid-area: 1 / 2; padding: 0; background: transparent; }
  /* The center column already excludes safe-area padding and both clusters.
     Constrain width only so height follows the same 256:224 aspect ratio. */
  canvas { width: min(100%, calc((100svh - 170px - max(6px, env(safe-area-inset-top)) - max(6px, env(safe-area-inset-bottom))) * 256 / 224)) !important; height: auto; }
  .touch-controls { display: contents; }
  .left-controls { grid-area: 1 / 1 / 4 / 2; }
  .right-controls { grid-area: 1 / 3 / 4 / 4; }
  .game-entry { grid-area: 2 / 2; gap: 4px; }
  #cartridge-label { font-size: 9px; }
  #current-game { font-size: 10px; }
  #change-cartridge { font-size: 10px; padding: 6px; }
  .toolbar { grid-area: 3 / 2; justify-content: center; gap: 2px; }
  .toolbar button { padding: 3px; font-size: 10px; }
  #volume { width: 58px; }
  #play { width: 34px; }
  #status { font-size: 10px; text-align: center; margin: 0; }
  .left-controls .system, .right-controls .system { justify-self: center; }
}
@media (orientation: landscape) and (max-height: 600px) and (max-width: 640px) {
  /* Leave room for a wrapped toolbar even with phone safe-area insets. */
  canvas { width: min(100%, calc((100svh - 204px - max(6px, env(safe-area-inset-top)) - max(6px, env(safe-area-inset-bottom))) * 256 / 224)) !important; }
}