html, body {
  height: 100%; /* Fallback */
  height: 100dvh;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute; /* Works better than fixed on Android */
  top: 0;
  left: 0;
  overscroll-behavior: none; /* Prevents the elastic "bounce" scroll effect */
}

body {
  display: flex;
  flex-direction: column;
}
body, button, label { font: 1rem sans-serif; }

memphis-menubar {
  flex-shrink: 0;
}

#editor-container {
  flex: 1 1 auto;
  height: 0; /* CRITICAL: Forces Firefox flexbox to respect overflow boundaries */
  min-height: 0; /* CRITICAL: Prevents flex items from exceeding parent */
  display: grid;
  gap: 0;
  background-color: var(--highlight);
  padding: 20px;
  scroll-padding: 20px; /* Forces scrollIntoView to stop 20px early, preventing overlap */
  overflow: auto;
  align-content: start;
  justify-content: start;
}

.cell {
  width: 20px;
  height: 20px;
  border: 1px solid var(--bevel2light);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 1.2rem;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.cell.cursor {
  background-color: var(--title2);
  outline: 2px solid var(--title1);
  border-color: var(--title1);
  z-index: 1;
  position: relative;
}

#hidden-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px; /* CRITICAL: Prevents mobile browsers from auto-zooming */
  pointer-events: none;
  z-index: -1;
  border: none;
  padding: 0;
  margin: 0;
}